z-index 用法

现在来说说关于z-index的用法，刚刚在写看页面的时候遇见这样的CSS代码，z-index : 2; 当时还不知道是干嘛用的，也不知道有什么作用，上网查了资料才知道。

几个例子吧，当你在需要把页面中的某个元素固定在页面中某个位置的话，你需使用这样的代码： position : fixed;  来固定，如果你不用z-index  : 2;  来设定的话，被固定的元素会随着页面的切换而改变。  这个属性值是可以随便设置的，但最好是正值，值越大那么这个元素就会被放在最上面。    那么现在有这样一个问题，如果同时有几个这样的z-index属性而且属性值还一样，那么会怎样布局呢，这个问题很简单。

 

<style>
#block1{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
position:absolute;
left:20px;
top:30px;
z-index:1
}
#block2{
background-color:#ffc24c;
border:1px dashed #000000;
padding:10px;
position:absolute;
left:40px;
top:50px;
z-index:1
}
#block3{
background-color:#c7ff9d;
border:1px dashed #000000;
padding:10px;
position:absolute;
left:60px;
top:70px;
z-index:0
}
</style>

<body>
<div id="block1">aaaaaaa</div>
<div id="block2">bbbbbbb</div>
<div id="block3">ccccccc</div>
</body>


这样的一段代码，书上说z-index值越大的会在值小的上面，这个block1和block2的z-index同时为1，block2会在block1上面。

 

reason：  

-index属性：较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位对象，此属性的 number 值为正数的对象会在其之上，而 number 值为负数的对象在其之下。设置参数为 null 可以移除此属性。
因此，在z-index属性值相同的情况下，后声明的会覆盖先前声明的标签；
posted @ 2013-08-12 20:50  西科程序  阅读(361)  评论(0)  编辑  收藏  举报