<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;}
.b{position:relative;margin:-70px 0 0 30px;background:#090;}
.c{position:relative;margin:-70px 0 0 60px;background:#f00;}
.d{position:absolute;z-index:99;height:50px;background:#090;}
你会发现虽然 a 的子元素 d 将 z-index 定义为99，但 d 仍然无法遮住 b 和 c 元素，这是因为 a 创建了新的局部层叠上下文，d 元素无法超越父级。
需要注意的是，此时就算 a 元素变成了定位元素，也不能改变其会创建新局部层叠上下文的命运，因为他设置了 opacity:.8。
按照我们前文所说，如果 a 没有定义 opacity:.8 ，但却像 b 和 c 元素一样设置了 relative，那么其子元素 d 将可以覆盖 b 和 c，至于这个例子就不再奉上了，大家随便写个测试一下即可。
