css:zindex的一些了解

设置是必须有position:absolute,relative,fixed的设置。

(1)并列的三个元素:

.aa { background: black; height: 500px; 500px; opacity: 0.4; filter: alpha(opacity=40); }
.bb { position: absolute; top: 0; }
.cc { position: absolute; top: 0; background: blue; height: 100px; 100px; }

<div class="ff">
<div class="aa"></div>
<div class="bb"><img src="img/news_23_thumb.jpg" /></div>
<div class="cc"></div>
</div>

第三个div在最上面,第二个在中间,第一个在最下面(都设置有position的前提下,要是没有,有的在上面(有的之间满足要求),没有的在下面)。

(2)嵌套

<div class="ff">
<div class="aa">
<div class="bb">
<div class="cc">
</div>
<img src="img/news_23_thumb.jpg" />
</div>
</div>
</div>

这样最里面的在最上面,(但是img标签和div cc并列,不满足上面并列的要求,但是要是cc和bb并列就满足上面的要求了)

加了z-index也没用,里面的在上面。

假如所有父元素都有z-index,子元素之间的z-index只对同一父元素下的有效,

假如不是所有父元素都有,对于IE6、7,同级之间才能比较,但是其他浏览器和IE8、9可以比较。

可以理解为IE6、7是先比较所有同级的元素(未显示设置的默认为0),叠好,再比较各个元素内部的

其他的浏览器是先比较所有显示设置z-index,在比较这些元素下面的

原文地址:https://www.cnblogs.com/yhongyu/p/2434567.html