CSS中的z-index属性基本使用教程

当opacity值小于1时，该元素会创建新的局部层叠上下文，也就是说它可以和定位元素进行层叠层别比较
当opacity值小于1时，该元素拥有层叠级别且相当于z-index:0或auto，但不能定义 z-index ，除非本身是定位元素
简单来说，当一个普通的元素定义了 opacity 的值小于1时（比如 opacity:.5），那么该元素的层叠级别将会高于普通元素，其效果类同于定位元素没有显式定义 z-index 的情况，唯一的区别是没有显式定义 z-index 的定位元素不会产生局部层叠上下文，而定义了 opacity 值小于1的元素会产生新的局部层叠上下文。

opacity猜想

假定我们有 a, b, c 三个元素，它们相互层层覆盖在一起，如果这时将 a 元素定义为 opacity:.8，你知道结果会怎样吗？

HTML

XML/HTML Code复制内容到剪贴板

<div class="a">a</div>  

<div class="b">b</div>  

<div class="c">c</div>  

CSS

CSS Code复制内容到剪贴板

.a,.b,.c{width:100px;height:100px;}   

.a{opacity:.8;background:#999;}   

.b{margin:-70px 0 0 30px;background:#090;}   

.c{margin:-70px 0 0 60px;background:#f00;}  

如果你看明白了我对于 opacity 与层叠上下文的描述，相信你可以猜到结果，是的，a 元素将会覆盖 b 和 c 元素，虽然它在HTML文档中出现在 b 和 c 之前，且不是定位元素。

必须看看具体的示例不是么？DEMO4: opacity与局部层叠上下文猜想。

如果我们将 b 和 c 设置为定位元素，又将会如何呢？

CSS

CSS Code复制内容到剪贴板

.a,.b,.c{width:100px;height:100px;}   

.a{opacity:.8;background:#999;}   

.b{position:relative;margin:-70px 0 0 30px;background:#090;}   

.c{position:relative;margin:-70px 0 0 60px;background:#f00;}  

不急，我们可以接着看示例 DEMO5: opacity与局部层叠上下文猜想2。

当一个普通元素定义了 opacity 为小于1的值时，该元素将像定位元素一样拥有层叠级别，可以覆盖普通元素，并且其层叠级别与未显式定义 z-index 的定位元素一样。

opacity创建局部层叠上下文

与未显式定义 z-index 的定位元素唯一不同的是 opacity 值小于1的元素会创建局部层叠上下文。

创建局部层叠上下文意味着什么，前文我们已经详述过。所以不再赘述，这里只给一个示例用以验证该特性。先奉上代码：

HTML

XML/HTML Code复制内容到剪贴板

<div class="a">a   

    <div class="d">d</div>  

</div>  

<div class="b">b</div>  

<div class="c">c</div>  

CSS

CSS Code复制内容到剪贴板

.a,.b,.c,.d{width:100px;height:100px;}   

.a{opacity:.8;background:#999;}   

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!