深入理解css中的position定位和z-index属性

cutsin 楼主

作者：Cutsin
原文地址：http://www.moonless.net/blog/2007/09/csspositionz-index.html

注：本文仅供交流使用，如有不当之处欢迎批评指正，但请注明详由，谢谢！

由于平时不太用到，所以过去写css的时候对于position属性的absolute、relative值理解比较模糊，对于z-index的层叠更是摸不着头脑，除了理解的因素外，各个浏览器的不同解析结果也是一个大问题。今天仔细阅读了一下css文档，总算是对盒模型的浮动、定位有了比较深刻的理解。

我们在实践中很有可能遇到这样的问题：
1、做一个横向导航，然后鼠标经过之后出现下拉菜单，那么这个下拉菜单的位置控制就是一个关键；
2、我们想在一个正常的页面布局中放入几个浮在页面上的气泡提示，这时既不想让气泡提示破坏正常的文档布局，又不想气泡提示的定位在不同的浏览器中到处乱飘。
3、当我们在一句正常的文本中插入一个小图标的话，一般会使用<img />标签，而这时它的垂直居中问题又是让人困惑，无论你使用html属性absmiddle、或是使用css属性vertical-align、抑或是使用父对象的heigh + line-height，在不同的浏览器中总会看起来不同。

嗯，上面几个问题你是否也遇到过呢？如果你至今还没有一个很好的解决办法，不妨继续阅读此文，或许能对你有所帮助：）

我们先看一下position属性的几个取值定义：
position: static、absolute、relative

static : 默认值。如果没有指定position属性，支持position属性的html对象都是默认为static，可以这么理解：把html页面看作一个文档流，源代码中各个标签的先后位置就是它们所对应的对象的呈现次序，所有取值为static的对象都按照你所编写的html标签的顺序依次呈现。
如下图所示，这是一个常见的指定了float:left;的横向导航：


relative: 相对定位。这个属性值保持对象所在文档流中的位置，也就是说它具有和static相同的呈现方式，它同样占有在文档流中的固定位置，后面的对象不会侵占或覆盖；与static属性值不同的是，设置了relative的对象，可以通过top, left, right, bottom属性设定自己的新显示位置，这4个属性的取值是相对于文档流的前一个对象的，你可以自由设置这4个属性偏移到新的位置而不对文档流中的其他对象产生任何影响，原来的页面呈现仍然会我行我素：


absolute: 绝对定位。和relative不同的是，这个属性值会将当前对象拖出文档流，后面的对象会占有原来的位置，也就是说，当前对象的呈现是独立显示的，但是它的位置在指定top, left, right, bottom任一属性之前仍是有继承性的，这时的4个属性的取值是相对于浏览器的，和文档流无关了。如果把示例中的B区域设定为absolute而不指定4个位置属性，通过设定margin来改变它的相对位置，用这个方法可以解决前面提到的问题2。


提示a: 苏昱的css2.0手册中提到relative和absolute定位的滚动条区别不是绝对的，至少在firefox、opera和safari中滚动条该出现还是会出现。

提示b: 属性值为absolute对象的z-index属性可以设置层叠显示的次序，它是直接有效的；
而属性值为relative对象的z-index属性在设置时要小心，把当前对象的z-index设置为-1是不行的，在firefox中它会无法显示（注意，不是说浏览器有误，而是指如果父对象是根元素body，那么z-index是无效的，任何z-index设置都不会显示在根元素之后，除了IE的解析bug，感谢#19提示），必须设置为0以上，我们如果想让别的对象挡住它，只有将其他对象也设置position为relative，并将z-index属性取一个比它大的值即可。

上面的表述不知道也许不是很清晰，具体的理解还是要自己亲自动手操作一下。

这样看来，前面的问题就有解了，问题3我们可以根据设计的要求将其设置为相对或绝对定位；
问题1的解决方法也有很多，个人推荐使用有语义的dl, dt, dd来实现，而且这个方法在不同浏览器中的表现基本相同（已在ie, firefox, opera, safari中测试），仅在top的属性上有几像素的差异，由于时间关系我只能给出自己测试时的代码以供参考：

body { color:#fff; font-size:12px; } ul li { float:left; height:30px; background-color:#99CC99; margin:0 10px; padding:0; border:1px solid #c30; width:100px; } ul li div { border:1px solid #f00; background-color:#996666; width:100px; height:100px; position:absolute; margin-top:15px; margin-left:-1px; *margin-left:-79px; } ul li dl, ul li dl dt, ul li dl dd { margin:0; padding:0; } ul li dl dd { border:1px solid #f00; background-color:#996666; width:100px; height:100px; position:absolute; margin-top:11px; *margin-top:10px; margin-left:-1px; } <ul> <li> 标题 - #text <div> 下拉菜单 - div </div> </li> <li style="position:relative;">列表b</li> <li>列表c</li> <li> <dl> <dt>标题 - dt</dt> <dd>下拉菜单 - dd</dd> </dl> </li> </ul>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

补充一个例子，请在IE和非IE浏览器中对比观看：

<style> .main { width:500px; height:500px; background-color:#9cf; } .layer_a, .layer_b, .layer_c, .layer_d { position:absolute; width:100px; height:60px; } .layer_a { background-color:#69c; } .layer_b { background-color:#369; } .layer_c { background-color:#eee; } .layer_d { background-color:#696; } .brd { border:1px solid #c30; margin:1em; } .block { display:block; } </style> <div class="main"> <div class="brd">一段文本一段文本一段文本一段文本一段文本一段文本一段文本<div class="layer_a"></div></div> <div class="brd">另一段文本另一段文本另一段文本<div class="layer_b"></div></div> <p class="brd">第三段不同的文本第三段不同的文本<div class="layer_c"></div></p> <p class="brd block">第四段指定了block的文本<div class="layer_d"></div></p> <a href="" class="brd">第四段指定了block的文本<div class="layer_c"></div></a> <map class="brd block">第四段指定了block的文本<div class="layer_d"></div></map> <dd class="brd">第四段指定了block的文本<div class="layer_a"></div></dd> <li class="brd">第四段指定了block的文本<div class="layer_b"></div></li> </div>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

从这个例子可以看出，IE将一个块元素绝对定位时，如果父元素是一个块级元素，那么拖出文档流之后它仍会继承原来所在位置的坐标；
而非IE浏览器的做法是：拖出文档流之后，直接定位到父元素所在的坐标。

[ 本帖最后由 cutsin 于 2007-9-13 20:08 编辑 ]

jiandu

<style>body { color:#fff; font-size:12px; } ul li { float:left; height:30px; background-color:#99CC99; margin:0 10px; padding:0; border:1px solid #c30; width:100px; } ul li div { border:1px solid #f00; background-color:#996666; width:100px; height:100px; position:absolute; margin-top:15px; margin-left:-1px; *margin-left:-79px; } ul li dl, ul li dl dt, ul li dl dd { margin:0; padding:0; } ul li dl dd { border:1px solid #f00; background-color:#996666; width:100px; height:100px; position:absolute; margin-top:11px; *margin-top:10px; margin-left:-1px; }</style> <ul> <li> 标题 - #text <div> 下拉菜单 - div </div> </li> <li style="position:relative;">列表b</li> <li>列表c</li> <li> <dl> <dt>标题 - dt</dt> <dd>下拉菜单 - dd</dd> </dl> </li> </ul>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

Spicegirl

多谢楼主总结，学习了。

greengnn

dl dt dd做下拉菜单并不合理，ul li ul就可以，绝对定位相对定位其实是最好应用的定位方式，IE和FF下也有细节上的区别，如FF下元素为百分之百是可以的而IE下只是内容的宽度为元素宽度，不能实现百分之百，还有IE下的绝对定位百分比BUG。

加一分鼓励一下

No01

太晚了 明天认真看看  谢谢楼主 分享

yangliangy

还是没懂,可以智商太低

cutsin 楼主

我是觉得使用dt、dd更有语义，如果导航的其中一个元素有下拉菜单，那么这个元素可以说是这个下拉菜单的标题。

感谢斑竹补充。

chengyu

谢谢LZ ，学习了，以前经常把相对和绝对搞混。。。

cycloned

定位后在IE6下的选取问题，还是没人帮解决啊~
哪个问题贴里的是无效的

cutsin 楼主

原帖由 cycloned 于 2007-9-11 11:38 发表
定位后在IE6下的选取问题，还是没人帮解决啊~
哪个问题贴里的是无效的

什么选取？

dearmonkey

不错。 不过dt dl 最好不要用于弹出菜单。

14px

关于绝对定位与相对定位，我突然想起了一点内容，
大家在IE6下看下这个demo，浮动层的z-index设置了99999999999999，b容器的z-index仅为2，结果却是b容器驾在了浮动层的上方。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <style> * { padding:0; margin:0; } .a { height:100px; background:#ffc; position:relative; } .b { height:100px; background:#060; position:relative; z-index:1; } .floatDiv { background:#000; position:absolute; height:300px; width:300px; top:20px; left:20px; z-index:99999999999999; } </style> <div class="a"> <div class="floatDiv"></div> </div> <div class="b"></div>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

html：

1. <div class="a">
   
2.         <div class="floatDiv"></div>
   
3. </div>
   
4. <div class="b"></div>

复制代码

css：

1. * {
   
2.         padding:0;
   
3.         margin:0;
   
4. }
   
5. .a {
   
6.         height:100px;
   
7.         background:#ffc;
   
8.         position:relative;
   
9. }
   
10. .b {
    
11.         height:100px;
    
12.         background:#060;
    
13.         position:relative;
    
14.         z-index:1;
    
15. }
    
16. .floatDiv {
    
17.         background:#000;
    
18.         position:absolute;
    
19.         height:300px;
    
20.         width:300px;
    
21.         top:20px;
    
22.         left:20px;
    
23.         z-index:99999999999999;
    
24. }

复制代码

14px

如果给a容器加上“z-index:2”的话，效果便完全不一样了：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <style> * { padding:0; margin:0; } .a { height:100px; background:#ffc; position:relative; } .b { height:100px; background:#060; position:relative; z-index:1; } .floatDiv { background:#000; position:absolute; height:300px; width:300px; top:20px; left:20px; z-index:99999999999999; } </style> <div class="a"> <div class="floatDiv"></div> </div> <div class="b"></div>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

所以得出结论：在IE6中，绝对定位的容器是否置于上方，还受到父体的影响。
浮动层就相当于PS中的图层，其父体就相当于PS中的图层文件夹，z-index就是图层在相应图层文件夹中的上下位置。

cutsin 楼主

感谢14px提出的问题，下面补充一例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <style> * { padding:0; margin:0; } .a { height:100px; background:#ffc; position:relative; } .b { height:100px; background:#060; position:relative; z-index:1; } .floatDiv { background:#000; position:absolute; height:300px; width:300px; top:20px; left:20px; z-index:999; } .floatDiv2 { background:#9cf; position:absolute; height:200px; width:100px; top:20px; left:120px; z-index:9999; } .innerA { background:#c30; position:absolute; height:50px; width:50px; top:30px; left:0; z-index:9999; } </style> <div class="a"> <div class="floatDiv"></div> <div class="floatDiv2"> <div class="innerA"></div> </div> </div> <div class="b"></div>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

我们可以看出由于a作为父对象首先被拖出文档流之后，它本身和内部所有对象被视为一个整体，这时a的z-index值仅和同级别的b是相对有效的，而内部对象floatDiv、floatDiv2无论如何设置，都是限制在父对象a之内，它们的z-index值仅在a内有效，但是如果我们把a的定位清除，如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <style> * { padding:0; margin:0; } .a { height:100px; background:#ffc; } .b { height:100px; background:#060; position:relative; z-index:1; } .floatDiv { background:#000; position:absolute; height:300px; width:300px; top:20px; left:20px; z-index:999; } .floatDiv2 { background:#9cf; position:absolute; height:200px; width:100px; top:20px; left:120px; z-index:9999; } .innerA { background:#c30; position:absolute; height:50px; width:50px; top:30px; left:0; z-index:9999; } </style> <div class="a"> <div class="floatDiv"></div> <div class="floatDiv2"> <div class="innerA"></div> </div> </div> <div class="b"></div>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

此时floatDiv、floatDiv2就和b同级了（可以理解为同一拨被定位的对象），这时它们的z-index值是相对有效的。

结论：z-index、position跟所对应对象的父对象是否定义了非默认值的position有关，如果父对象绝对/相对定位了，那么父对象内部所有元素的z-index、position属性的作用范围都仅限制在父对象内部。

[ 本帖最后由 cutsin 于 2007-9-12 11:14 编辑 ]

14px

恩``！`````这是一个非常重要的条件。
我想，我没发现它的原因，在于我的书写习惯，在使用绝对定位时，我习惯于在其父体上加上position:relative。
但这样的习惯，是有原因的，请看下面的例子（在楼上的后一个demo中加上了一个div.edge）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <style> * { padding:0; margin:0; } .edge { padding-left:500px; } .a { height:100px; background:#ffc; } .b { height:100px; background:#060; position:relative; z-index:1; } .floatDiv { background:#000; position:absolute; height:300px; width:300px; top:20px; left:20px; z-index:999; } .floatDiv2 { background:#9cf; position:absolute; height:200px; width:100px; top:20px; left:120px; z-index:9999; } .innerA { background:#c30; position:absolute; height:50px; width:50px; top:30px; left:0; z-index:9999; } </style> <div class="edge"> <div class="a"> <div class="floatDiv"></div> <div class="floatDiv2"> <div class="innerA"></div> </div> </div> <div class="b"></div> </div>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

因此，在使用绝对定位时，需要注意在浮动对象的父体中设置position:relative/absolute，以确定浮动对象的参照对象。

14px

确定参照对象之后：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <style> * { padding:0; margin:0; } .edge { padding-left:500px; } .a { height:100px; background:#ffc; position:relative; } .b { height:100px; background:#060; position:relative; z-index:1; } .floatDiv { background:#000; position:absolute; height:300px; width:300px; top:20px; left:20px; z-index:999; } .floatDiv2 { background:#9cf; position:absolute; height:200px; width:100px; top:20px; left:120px; z-index:9999; } .innerA { background:#c30; position:absolute; height:50px; width:50px; top:30px; left:0; z-index:9999; } </style> <div class="edge"> <div class="a"> <div class="floatDiv"></div> <div class="floatDiv2"> <div class="innerA"></div> </div> </div> <div class="b"></div> </div>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

cutsin 楼主

补充一个例子，请在IE和非IE浏览器中对比观看：

<style> .main { width:500px; height:500px; background-color:#9cf; } .layer_a, .layer_b, .layer_c, .layer_d { position:absolute; width:100px; height:60px; } .layer_a { background-color:#69c; } .layer_b { background-color:#369; } .layer_c { background-color:#eee; } .layer_d { background-color:#696; } .brd { border:1px solid #c30; margin:1em; } .block { display:block; } </style> <div class="main"> <div class="brd">一段文本一段文本一段文本一段文本一段文本一段文本一段文本<div class="layer_a"></div></div> <div class="brd">另一段文本另一段文本另一段文本<div class="layer_b"></div></div> <p class="brd">第三段不同的文本第三段不同的文本<div class="layer_c"></div></p> <p class="brd block">第四段指定了block的文本<div class="layer_d"></div></p> <a href="" class="brd">第四段指定了block的文本<div class="layer_c"></div></a> <map class="brd block">第四段指定了block的文本<div class="layer_d"></div></map> <dd class="brd">第四段指定了block的文本<div class="layer_a"></div></dd> <li class="brd">第四段指定了block的文本<div class="layer_b"></div></li> </div>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

从这个例子可以看出，IE将一个块元素绝对定位时，如果父元素是一个块级元素，那么拖出文档流之后它仍会继承原来所在位置的坐标；
而非IE浏览器的做法是：拖出文档流之后，直接定位到父元素所在的坐标。

Spicegirl

原帖由 cutsin 于 2007-9-10 18:19 发表
提示b: 属性值为absolute对象的z-index属性可以设置层叠显示的次序，它是直接有效的；
而属性值为relative对象的z-index属性在设置时要小心，把当前对象的z-index设置为-1是不行的，在firefox中它会无法显示，必须设置为0以上，我们如果想让别的对象挡住它，只有将其他对象也设置position为relative，并将z-index属性取一个比它大的值即可。

所谓FF中无法显示负值是个误解，具体请看下面blank的文章，在二楼有专门提到：

z-index在IE中的迷惑

cutsin 楼主

原帖由 Spicegirl 于 2007-9-13 18:47 发表


所谓FF中无法显示负值是个误解，具体请看下面blank的文章，在二楼有专门提到：

z-index在IE中的迷惑

呵呵，我提到无法显示不是说不支持负值，只是说在父对象是body的情况下，设置负值是无效的，怪我没写清……，已修正了主楼，多谢提示！

[ 本帖最后由 cutsin 于 2007-9-13 19:57 编辑 ]

dtzuo

太菜了，，慢慢看。

qinw0815

得好好看看了

anlu2005

运行怎么有问题的啊！我用的傲游浏览器

yd514

结论：z-index、position跟所对应对象的父对象是否定义了非默认值的position有关，如果父对象绝对/相对定位了，那么父对象内部所有元素的z-index、position属性的作用范围都仅限制在父对象内部。

[ 本帖最后由 cutsin 于 2007-9-12 11:14 编辑 ]

问:如果所对应的你对象没有定义position,那么z-inde、position属性的作用范围 是不是可以超出
    父对象之外？？？？
   又或是像：“此时floatDiv、floatDiv2就和b同级了（可以理解为同一拨被定位的对象），这时它们
   的z-index值是相对有效的。”