爲什麼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風格。