---------------------------------------------------------------最新资料推荐------------------------------------------------------
相对定位与绝对定位
CSS 定位与定位应用定位一直是 WEB 标准应用中的难点，如果不清楚定位那么可能一些效果将不能实现，即使实现了某些效果，在浏览器的兼容性方面可能也会出现问题，如果理清了定位的原理，那么定位会让网页实现的更加完美。
在网页制作中，例如实现对联广告，这时候就需要设置绝对定位，来实现如图 1 所示的效果。
图 1 对联广告一、 position 的三种定位方式图 1 演示了绝对定位的应用， position 定位属性主要包含 relative 相对定位、absolute 绝对定位和 static 默认定位三种定位方式，下面分别对这三种定位方式进行讲解。
（1） relative 相对定位，相对于文档流原来位置的偏移，原占位大小完整保留。
相对定位常用的属性、值及其含义如下表所示。
定位属性属性值说明定位方式position position:relative; 采用相对定位，相对于本来位置的偏移偏移量 left left:20px; 距离参照物左侧 20px right right: 50px; 距离参照物右侧 50px top top: 10px; 距离参照物顶部 10px，相对定位参照物为元素的本来位置 bottom bottom:100px; 距离参照物底部 100px 一般情况下， right 和 left 或 top 和 bottom 不应同时存在。
1 / 9
他们之间有个公式。
left 值等于-right，同样的， top 值等于-bottom，例如：
left: 10px; 等价于right: -10px; 。
我们根据上表中对 relative 知识的描述，来看图 2 中相对
定位元素第 2 块的特点。
图 2 相对定位在图 2 中，第 2 块内容本应该在虚线范
围内，但是它却移动了位置，主要是在图 2 页面的第 2 块中加入position:relative; top: 10px; left:20px; 代码，第 2 块实现
了相对定位，并且左、上都有一定的偏移量，所以就呈现了如图 2
所示的效果。
图 2 页面的关键代码如下所示：
html head title相对定位 /title style type=text/css
div{ color: #fff; font:bold 22px 黑体; width:
150px; height:120px; background:red; float:
left; } . div2{ height:150px; background:#ff7300; position:relative; top: 10px; left:20px; } .
clear{ background:blue; } /style /head body div第
1 块 /div div class=div2第
2 块 /div div class=clear第 3
块 /div /body /html 从上面的代码中可以知道，相对定位有
如下 3 个特点：
①参照物：
相对定位是相对于未设置定位方式前的位置，其参照物就是原
---------------------------------------------------------------最新资料推荐------------------------------------------------------
来位置。
②偏移量：
方式确定后，根据与参照物的具体偏移量来确定元素新位置。
③占位：
相对定位偏移后的元素，其占有的位置是原来位置，其偏移
后会覆盖并位于其他重叠元素（如第 3 块）的上面，但不会增加
高度和宽度。
（2） absolute 绝对定位，完全脱离文档流，是相对于第
一个非默认定位方式的上级元素的距离。
相对定位的元素大小会在文档流原来位置占去相同大小的页面
空间。
而绝对定位则不再占原文档流页面的任何空间。
其常用属性语法语义与相对定位类似，例如position:absolute; top: 200px; left: 150px; 。
定位方式的区别导致了参照物区别。
具体参照物为上级元素中，第一个存在非默认定位方式的元
素，它完全脱离了文档流。
下面图 2 页面中的代码进行修改，只修改样式. div2，修
改为绝对定位，为方便参照，加大了偏移量，其他代码均没有任
何变化， . div2修改后的代码如下所示。
. div2{ height:150px; background:#ff7300;
3 / 9
position:absolute; top: 180px; left:200px; }
修改后在浏览器中运行的效果如图 3 所示，第 2 块风格改为绝对
定位后，位置也发生了变化，并且不再占有原来的位置。
图 3 绝对定位学习完绝对定位，可以发现绝对定位也有
3 个特点：
①参照物：
绝对定位参照物是第一个非默认定位方式的上级元素，如不存
在则为整个页面。
②偏移量：
方式确定后，根据与参照物的具体偏移量来确定元素新位置。
③占位：
绝对定位偏移后的元素，不再占原来位置，其偏移后会覆盖
并位于其他重叠元素（如第 3 块）的上面。
现在为三个 div 增加一个上级 div，并且设置上级 div 的
相对定位为 relative，上外边距设置 50px，左边距设置为 60px，
修改后的页面代码如下所示。
html head title绝对定位/title style
type=text/css . div1{ color: #fff; font:bold 22px 黑
体; width: 150px; height:120px; background:red; float: left; } .
div2{ height:150px; background:#ff7300; position:absolute; top: 180px; left:200px; } .
---------------------------------------------------------------最新资料推荐------------------------------------------------------
clear{ background:blue; } .
div_big{ position:relative; top: 50px; left:60px; } /style /head body div class=div_big div class=div1第 1 块 /div div class=div1 div2第 2 块
/div div class=div1 clear第 3 块 /div /div /body
/html 修改完上面的代码后，在浏览器中运行的效果如图 4 所示。
图 4 绝对定位及相对定位的应用 position 还有一种类
似的定位方式为固定定位，值为 fixed。
同样完全脱离文档流，但参照物为浏览器的可见范围。
但只工作在 IE7. 0的 strict 模式下，这里稍微提下。
（3） static 静态无偏移，不填时默认属性，偏移量属性
无效，属于常规文档流。
虽然这个参数只有在 JavaScript 中实现某些效果时使用，但
必须理解 static 定位方式对应的常规文档流概念。
在前面内容中，我们学习并不断涉及到文档流的概念，我们
知道，它是页面内容的组织方式，即从上至下，先分行；然后每
行根据元素的特点放置元素：
块级元素独占一行，行级元素从左至右排列。
这种组织方式就是往容器中放置流体。
流体即水、油等液体，特点是自动紧密排列填充容器，就好
像往水缸倒水。
5 / 9
而非流体则是无此特点，如屋子里摆放各类家具。
常规文档流中的常规，是指除浮动和绝对定位外，网页显示元素的默认组织方式。
相对于浮动与绝对定位的特殊情况，常规文档流可以简单的描述为原来位置。
上面我们讲解了定位属性中的三种定位方式，其中相对定位与绝对定位，会与原文档流形成堆叠，覆盖在其他重叠位置元素的上面。
那么：
（1）为什么相对或绝对定位元素会位于常规文档流前面呢？（2）当有多个相对或绝对定位元素存在时，他们又应该如何排列顺序？要回答这些问题，必须理解并掌握叠放层次 z-index 属性。
二、叠放层次属性 z-index z-index 属性只对非默认定位方式的元素（相对、绝对与固定定位）有效，默认值为 1，其值为正整数。
值越大，叠放在越前面。
其语法格式如：
z-index: 2 。
在绝对定位效果图的例子中新增 1 个绝对定位的 div，并设置第 2 块叠放层次为z-index: 2 ，修改后的代码如下所示。
html head title相对定位/title style
---------------------------------------------------------------最新资料推荐------------------------------------------------------
type=text/css div{ color: #fff; font:bold 22px 黑体; width: 150px; height:120px; background:red; float: left; } . div2{ height:150px; background:#ff7300; position:relative; top: 10px; left:20px; z-index: 2; } .
clear{ background:blue; } .
div4{ position:absolute; top: 100px; left:100px; background:green; } /style /head body div第 1 块 /div
div class=div2第 2 块 /div div class=clear第 3 块 /div
div class=div4第 4 块(未设置 z-index) /div /body /html
在浏览器中运行上面的代码，效果如图 5 所示。
图 5 叠放层次的应用在图 5 中，可以很明显的看到，
叠放属性是z-index: 2 的第 2 块位于最上面，第 4 块其次，最
底下是未设置绝对定位的文档流。
第 4 块并未设置 z-index 的值，但绝对定位的元素，其
z-index 默认值为 1。
我们再把上面代码略修改，把第 2 块的z-index:2属性去掉。
那么，它的 z-index 值应该也是默认值 1，这时就出现 1 个
问题，同层次如何确定叠放顺序呢？在浏览器中运行修改后的代
码，效果如图 6 所示。
图 6 叠放层次后来者居上从图 6 中我们很容易得出答
7 / 9
案，同层间，按代码中出现顺序排，后出现的居上。
因为叠放层次值，也可以理解为 2 在正常顺序中位于 1 后面，因此，可以很简单的把这些叠放层次的组织顺序总结为后来者居上：
（1）叠放层次值有大小差异，大的居上。
就像建房子，地基即文档流页面。
楼层数越大则在越上面。
（2）同层间，后出现的居上。
三、实例演示学习完定位属性，特别是绝对定位及叠放层次 z-index 属性后，就可以实现页面中常用到的带关闭按钮的对联广告效果，具体效果如图 7 所示。
图 7 带关闭按钮的对联广告要实现上述效果，其实比较简单：
1）在页面中放置 4 个元素并设置为绝对定位 2）设置关闭图片的叠放层次为z-index: 2; 3）根据效果图，确定：
①左边图的左边界left:40px; ②右边图的右边界left:40px; ③统一上边界， top: 30px; 。
理清思路后，实现上述效果的代码如下所示。
html head title带关闭按钮的对联广告 /title style tylie=text/css body{ margin:0px; padding: 0px; } #advLeft, #advRight, #closeLeft, #closeRight{ position:absolute; top: 30px; }
---------------------------------------------------------------最新资料推荐------------------------------------------------------
#advRight, #closeRight{ right: 40px; } #advLeft, #closeLeft{ left:40px; } #closeLeft, #closeRight{ z-index: 2; } /style /head body div id=closeLeft img src=images/close. gif alt=alt / /div div id=closeRight img src=images/close. gif alt=alt / /div div id=advLeft img src=images/ad1. jpg alt=alt / /div div id=advRight img src=images/ad2. jpg alt=alt / /div /body /html 学习完上述内容，可以总结出各种定位方式的使用场合：（1）绝对定位，对联广告及悬停显示等 ajax 效果。
用于在有限页面空间中实现多元素叠放。
（2）相对定位，一般用于为绝对定位的上级元素，为绝对定位元素提供参照物。
9 / 9