position有四个不同的值 - CSS教程·七彩课堂

七彩课堂[网页设计CSS教程系列]

position有四个不同的值

我们都知道，position有四个不同的值，分别为：static | absolute | fixed | relative。在苏昱的《CSS2中文手册》中是这样解释的：static:无特殊定位，对象遵循HTML定位规则； absolute:将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框； relative:对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置； fixed:IE5.5及NS6尚不支持此属性。

但是要想改变对象的层叠位置需要的是另一个CSS属性：z-index。但是这个z-index并非是无所不能的，他受到了HTML代码等级的制约。z-index只能在同等级的HTML上体现他的作用。这里需要声明的是z-index只有在对象的position值为relative/absolute时才可以使用。下面我们就举些例子来解释等级的特性：

[Copy to clipboard]CODE:
<div id="box_1">
<div id="a">这是第一个块</div>
<div id="b">这是第二个块</div>
</div>

针对上面的这个HTML代码我们还需要写一段CSS来定义它：

[Copy to clipboard]CODE:
#a,#b {position:absolute; width:300px; height:100px; }
#a {z-index:10; left:0; top:0; background:#000; }
#b {z-index:1; left:20px; top:20px; background:#c00; }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<body id="" class="">
<div id="box_1">
<div id="a">这是第一个块</div>
<div id="b">这是第二个块</div>
</div>
</body>

</html>
提示：您可以先修改部分代码再运行
这是最普通的在这种情况下#a与#b的层叠等级是可以通过z-index来设定的。这是没问的，那么什么样的情况下就会出现问题呢？我们再看一个实例：

[Copy to clipboard]CODE:
<div id="box_1">
<div id="a">这是第一个块</div>
</div>
<div id="box_2">
<div id="b">这是第二个块</div>
</div>

根据这个结构再写一个CSS,要注意这个CSS中的不同的地方:

[Copy to clipboard]CODE:
#box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}
#a, #b {position:absolute; width:100px; height:300px; }
#a {background:#c00; z-index:100; }
#b {background:#0c0; z-index:1; left:50px;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<body id="" class="">
<div id="box_1">
<div id="a">这是第一个块</div>
</div>
<div id="box_2">
<div id="b">这是第二个块</div>
</div>
</body>

</html>
提示：您可以先修改部分代码再运行
这时候我们看,不论#a设为多大的值,他都无法超过#b,所以说z-index是无法冲破HTML的等级的,他必需是要同等级的状态下才可以发挥威力.那么如何解决这个问题呢?我可以反过来想,堂兄弟之间的顺序不能被重组,何不把父辈的等级做一次重组呢?所以我们把#box_1的CSS中加入一个z-index:100; 在#box_2的CSS中加入z-index:1;这样再看一下效果:

[Copy to clipboard]CODE:
#box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}
#box_1 {z-index:100;}
#box_2 {z-index:1;}
#a, #b {position:absolute; width:100px; height:300px; }
#a {background:#c00; }
#b {background:#0c0; left:50px;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<body id="" class="">
<div id="box_1">
<div id="a">这是第一个块</div>
</div>
<div id="box_2">
<div id="b">这是第二个块</div>
</div>
</body>
</html>
提示：您可以先修改部分代码再运行
这是指定父级重组了层叠的顺序,如果要是没有办法一一指定父级的顺序重组,那就要看看上一篇的《position:relative/absolute无法冲破的等级》.但是也不是什么问题都能解决,但是看看也许能帮你想到更好的办法!