对z-index的一些实践总结

标签：

1.元素有个默认的层级，默认DOM中靠后的元素层级更高；body与html似乎有默认的z-index，即使不设置也相当于设置后的效果，即其子元素不论层级正负，都处于body与html之上。

2.当父级元素没有设置z-index值时，子元素z-index>=0则显示在父级元素之上，若子元素z-index< 0则显示在父级元素之下，但不论元素z-index值多小，始终是显示在body与html元素之上；而当父级或祖先元素设置了z-index值后，不论子元素z-index值为多少，都显示在父级元素之上。

3.同级元素z-index相同时，后者居上，否则大者居上。没有设置z-index值时可作为0值进行比较，大者居上。如果同级元素没有设置z-index值，则其第一个具有z-index属性的子元素的z-index可以直接与他的同级元素进行比较，大者居上。只有当父级元素设置了z-index值时，才会影响其后各自子元素的层叠关系。简言之，在同级的比较中，其实只比较一次，也就是各自第一个具有z-index值的元素进行比较，如果哪个同级元素及其子元素都没有设置z-index值，则选最顶层的同级元素进行比较。其后的元素不论层级高低，总是跟随父亲一起显示。

4.奇葩的ie6，总是要先比较父级元素的层级高低，父级元素层级比较占了下风，则子元素层级再高也没法出头，拼爹的节奏。用Multibrowser测试ie7也是这个效果。而当元素z-index为负时，此元素处于祖先元素之下，直到遇到第一个position不为static的祖先元素（或者body和html），这样的祖先元素会阻止它下沉，不许它自甘堕落啊~

关于ie6中z-index的问题这里就不赘述啦~

测试代码如下，可以自己添加z-index值进行验证：

        <div class="a">
		<div class="b"></div>
	</div>
	<div class="c">
		<div class="d"></div>
	</div>    

样式代码：

.a{
	position:relative;
	width:300px;
	height:200px;
	border:10px black solid;
	background:yellowgreen;
}
.b{
	position:absolute;
	width:100px;
	height:100px;
	border:5px white solid;
	background:#959;
}
.c{
	position:relative;
	width:300px;
	height:200px;
	border:10px black solid;
	background:#959;
	top:-150px;
	left:80px;
}
.d{
	position:absolute;
	width:100px;
	height:100px;
	border:5px white solid;
	background:yellowgreen;
}

对z-index的一些实践总结

标签：

原文地址：http://www.cnblogs.com/hgsmama/p/4318260.html