为什么CSS不透明度会影响div上方的div？

Question

我在HTML元素内部覆盖，并且在覆盖内部，我有包含消息的元素。但是对于一些共振，上面的元素也从它下面的元素中获得不透明性。

编辑：我只有用最新的Firefox测试这一点。

这里是CSS代码示例说明问题：

.overlay { 
    z-index: 1000; 
    border: medium none; 
    margin: 0pt; 
    padding: 0pt; 
    width: 100%; 
    height: 100%; 
    top: 0pt; 
    left: 0pt; 
    background-color: #fff; 
    opacity: 0.6; 
    cursor: wait; 
    position: absolute; 
} 
.overlay .message { 
    z-index: 1001; 
    position: absolute; 
    padding: 0px; 
    margin: auto; 
    width: 30%; 
    top: 15%; 
    left: 30%; 
    text-align: center; 
    color: #fff; 
    border: 3px solid red; 
    background-color: #fff; 
    background: fuchsia; 
    font-size: 18px; 
    font-weight: bold; 
    padding: 5%; 
} 

这里是HTML代码：

<div class="overlay"> 
    <div class="message"> 
     test 
    </div> 
</div> 

Answer 1

不透明度影响到的不仅仅是元素本身，但一切都在覆盖（所以消息）。它的工作原理，如果你分开的覆盖和消息：

<div class="modal"> 
    <div class="overlay">overlay</div> 
    <div class="message">message</div> 
</div> 

而CSS：

.modal { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
.overlay { 
    /* … */ 
} 
.message { 
    /* … */ 
} 

这里消息不覆盖的后裔，因此不会受到覆盖“ s风格。