<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Div + CSS Example, Wayhome's Blog</title>
<style type="text/css">
<!--
body,td,th{font-family:Verdana;font-size:9px;}
-->
</style></head>
<body>
<div style="position:absolute; top:5px; right:20px; width:200px; height:180px; background:#00FF00;">
　position: absolute;<br />
　top: 5px;<br />
　right: 20px;<br />
　<div style="position:absolute; left:20px; bottom:10px; width:100px; height:100px; background:#00FFFF;">
position: absolute;<br />
left: 20px;<br />
bottom: 10px;<br />
</div>
</div>
<div style="position:absolute; top:5px; left:5px; width:100px; height:100px; background:#00FF00;">
　position: absolute;<br />
　top: 5px;<br />
　left: 5px;<br />
</div>
<div style="position:relative; left:150px; width:300px; height:50px; background:#FF9933;">
　position: relative;<br />
　left: 150px;<br />
　<br />
　width: 300px; height: 50px; <br />
</div>
<div style="text-align:center; background:#ccc;">
　　<div style="margin:0 auto; width:600px; background:#FF66CC; text-align:left;">
　 <p>1</p>
　 <p>2</p>
　 <p>3</p>
　 <p>4</p>
　 <p>5</p>
　 <div style="padding:20px 0 0 20px; background:#FFFF00;">
　　　 padding: 20px 0 0 20px;
　　<div style="position:absolute; width:100px; height:100px; background:#FF0000;">position: <span style="color:#fff; ">absolute</span>;</div>
　　<div style="position:relative; left:200px; width:500px; height:300px; background:#FF9933;">
　　　　position: <span style="color:blue;">relative</span>;<br />
　　 left: 200px;<br />
　　 <br />
　　 width: 300px;<br />
　　 height: 300px;<br />
　　 <div style="position:absolute; top:20px; right:20px; width:100px; height:100px; background:#00FFFF;">
　　　 position: absolute;<br />
　　　 top: 20px;<br />
　　　 right: 20px;<br /></div>
　　 <div style="position:absolute; bottom:20px; left:20px; width:100px; height:100px; background:#00FFFF;">
　　　 position: absolute;<br />
　　bottom: 20px;<br />
　　left: 20px;<br />
　　</div>
　　</div>
　 </div>
　
</div>
</div>
</body>
</html>  

　　absolute：绝对定位，CSS 写法“ position: absolute; ”，它的定位分两种情况，如下： 

　　1. 没有设定 Top、Right、Bottom、Left 的情况，默认依据父级的“内容区域原始点”为原始点，上面例子红色部分(父级黄色区域有 Padding 属性，“坐标原始点”和“内容区域原始点”不一样)。 

　　2. 有设定 Top、Right、Bottom、Left 的情况，这里又分了两种情况如下： 

　　(1). 父级没 position 属性，浏览器左上角(即 Body)为“坐标原始点”进行定位，位置由 Top、Right、Bottom、Left 属性决定，上面例子绿色部分。 

　　(2). 父级有 position 属性，父级的“坐标原始点”为原始点，上面例子浅蓝色部分。 

　　relative：相对定位，CSS 写法“ position: relative; ”，参照父级的“内容区域原始点”为原始点，无父级则以 Body 的“内容区域原始点”为原始点，位置由 Top、Right、Bottom、Left 属性决定，且有“撑开或占据高度”的作用，上面例子橙色部分。 

　　通过上面的例子和讲解，相信熟练运用 absolute 与 relative 并不是一件很困难的事，我们周围有不少关于 absolute 与 relative 的好例子，比如“网易163免费邮”首页(http://mail.163.com)，里面就有大量的运用。

css absolute与relative的区别的更多相关文章

  1. Div CSS absolute与relative的区别小结

    absolute:绝对定位,CSS 写法“ position: absolute; ”,它的定位分两种情况,如下: 1. 没有设定 Top.Right.Bottom.Left 的情况,默认依据父级的“ ...

  2. Position属性四个值：static、fixed、absolute和relative的区别和用法

    Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...

  3. css中的position 的absolute和relative的区别（转）

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  4. css 布局absolute与relative的区别

    absolute:当使用时,表示在文档流中没有实际存在位置(浮动),在不设置任何方位值时,只能按兵不动,当设置了方位值之后,会紧接着去寻找距离最近的能够将它包含住的父级元素,然后进行定位. relat ...

  5. position属性absolute与relative 的区别

    连接:https://www.cnblogs.com/duyanli/p/3534005.html 每次要用到Position属性时,总要去搜索下,这两个属性值的区别:今天就直接复制网上的结果,以便以 ...

  6. CSS absolute与relative不得不说的故事

    写在开篇: absolute说:“relative,我这辈子都不想看见你!” 为什么呢?它们明明那么相亲相爱,形影不离,这之中到底发生了什么不为人知的故事,竟然让absolute如此讨厌relativ ...

  7. Position属性四个值：static、fixed、absolute和relative的区别

    1.static(静态定位):默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 2.relative(相对定位):生成相对 ...

  8. CSS+DIV布局中absolute和relative区别

    原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...

  9. css absolute和float，relative，z-index的同异

    大神占楼: 简书作者:张歆琳 http://www.jianshu.com/p/a3da5e27d22b http://www.cnblogs.com/lxblog/p/3152897.html 摘录 ...

随机推荐

  1. MS-SQL SERVER单列合并的四种常用方法

    /* 原始数据 ID Name ----------- -------------------- 1 吕布 2 张飞 3 赵云 结果 ----------------- 吕布,张飞,赵云 */ )) ...

  2. 未能进入中断模式，原因如下：源文件“XXXXXX”不属于正在调试的项目。

    这个问题是由于项目文件位置变动导致的.提示框已经说的比较清楚了. 首先可以尝试[重新生成] ,一般可以解决这个问题了. 我遇到的情况是,设置配置时,不小心取消了生成选择. 所以打开配置管理器,把相关的 ...

  3. Android nDrawer

    GitHub上一款流行的侧滑,附上自己as编译过的源码http://download.csdn.net/detail/lj419855402/8559039. 留个纪念,说不定以后用得到. 依赖一个l ...

  4. ListView缓存机制踩过的坑

    ListView,GrildView使用时候经常会用到缓存机制,随意一搜,例子成千上万,但是讲解都是很一致,跟自己踩的坑很少有人讲解到. 测试 需求: GrildView 分三列显示,默认背景为白色, ...

  5. iOS开发--应用设置及用户默认设置——转载

    [链接]iOS开发--应用设置及用户默认设置[1.bundlehttp://www.jianshu.com/p/6f2913f6b218 在iphone里面,应用都会在“设置”里面有个专属的应用设置, ...

  6. [转载]Java应用程序中的内存泄漏及内存管理

    近期发现测试的项目中有JAVA内存泄露的现象.虽然JAVA有垃圾回收的机制,但是如果不及时释放引用就会发生内存泄露现象.在实际工作中我们使用Jprofiler调用java自带的 jmap来做检测还是很 ...

  7. Jenkins进阶系列之——06FTP publisher plugin插件下载(支持绝对路径)

    注意:绝对路径用/开头 绝对路径:/root/.jenkins/jobs/test/workspace/bbb/test.war 相对路径:bbb/test.war 点我下载

  8. 【java基础】IOC介绍及其简单实现

    控制反转(Inversion of Control,英文缩写为IoC)是一个重要的面向对象编程的法则来削减计算机程序的耦合问题,也是轻量级的Spring框架的核心. 控制反转一般分为两种类型,依赖注入 ...

  9. 回顾一年的IT学习历程与大学生活

    今天是2015年8月27日,距离成为大三狗还有一个多星期,在这个不算繁忙的暑假的下午来总结一下这一年来,在IT方面的学习. 一.入门(2014.3) 我大一的专业是信息工程,信息工程听上去就是信息(I ...

  10. 开源搜索引擎Iveely 0.8.0发布，终见天日

    这是一篇博客,不是,这是一篇开源人的心酸和喜悦,没有人可以理解我们的心情,一路的辛酸一路的艰辛,不过还好,在大家的支持下,总算是终见天日,谢谢那些给予我们无私帮助的朋友.您的支持,依然是我们无限的动力 ...