CSS屬性「不透明」的古怪行爲

在處理任務時，我必須在可滾動面板的頂部有一個固定位置的工具欄，我偶然發現了CSS屬性「opacity」的這種古怪（？）行爲，。CSS屬性「不透明」的古怪行爲

這simplistic fiddle是自explainatory，但總結：如果你有兩個div，一個是固定的定位和背後的另一個滾動固定一個，然後在滾動半透明的內容（不透明度< 1）（？） div顯示在固定div上。固定格的不透明度在這裏並不重要。

雖然問題消失，如果我給固定div指定大於可滾動div的z-index（請參閱this fiddle），但我仍然很想知道爲什麼opacity屬性在這種情況下以直觀的方式表現出來。

有人可以解釋一下嗎？

順便說一句，該行爲在Chrome瀏覽器35，FF 30和IE 10

一致這裏複製從的jsfiddle代碼 - 因爲它是常態。

CSS

.fixedOpaqueDiv { 
    position: fixed; 
    background-color: #ABABAB; 
    width: 100%; 
    height: auto; 
    text-align: center; 
    font-size: 20px; 
    color: #DDDDDD; 
    padding-top: 5px; 
    opacity: 1; 
} 
.scrollingDiv { 
    padding-top: 140px; 
    text-align: center; 
    color: blue; 
    font-weight: bold; 
} 

.opaque { 
    opacity: 1; 
} 

.translucent { 
    opacity: 0.5; 
}

HTML

<div style="height: 300px; overflow: auto;"> 
    <div class="fixedOpaqueDiv">I am a div with fixed position, 
     <BR>with same z-index as the div below. 
     <BR>I am supposed to be Opaque, but 
     <BR>apparently I am opaque ONLY to the opaque divs below, 
     <BR>and not to the translucent ones</div> 
    <div class="scrollingDiv"> 
     <div class="translucent" style="color: red; padding: 5px;">^^^^^^^^ Scroll up ^^^^^^^^</div> 
     <div class="opaque">Opaque 1</div> 
     <div class="translucent">Translucent 1</div> 
     <div class="opaque">Opaque 2</div> 
     <div class="translucent">Translucent 2</div> 
     <div class="opaque">Opaque 3</div> 
     <div class="translucent">Translucent 3</div> 
     <div class="opaque">Opaque 4</div> 
     <div class="translucent">Translucent 4</div> 
     <div class="opaque">Opaque 5</div> 
     <div class="translucent">Translucent 5</div> 
     <div class="opaque">Opaque 6</div> 
     <div class="translucent">Translucent 6</div> 
     <div class="opaque">Opaque 7</div> 
     <div class="translucent">Translucent 7</div> 
     <div class="opaque">Opaque 8</div> 
     <div class="translucent">Translucent 8</div> 
    </div> 
</div>

來源

2014-07-17 Alphonso

當然，有一個有趣的效果，但有兩個重疊的元素具有相同的z-index，當你在同一個地方有兩個平面時，就會以與3D圖形非常相似的方式詢問不可預知的行爲。 –

同意。這兩個DIV都具有相同的Z-索引，因爲我沒有明確地將它們分配給它們中的任何一個。這一切都運行良好，因爲我在滾動面板中沒有任何半透明的內容，問題僅在有人看到可滾動面板後才顯示出來，並且一些半透明的內容進入。理想情況下，問題應該從一開始就表現出來。 – Alphonso

這是與事實做an element with opacity less than 1 creates a stacking context。沒有建立堆疊上下文的元素將被固定位置元素遮蓋，但是建立堆疊上下文的半透明元素將被繪製在前面，因爲它們出現在源中的固定位置元素之後。

原因設置z-index的作品是因爲您然後使固定位置元素的堆棧級別大於可滾動元素的內容的堆棧級別。

Section 9.9 of the CSS2.1 spec總結了元素堆疊的確切順序。在列表中的最後兩項是有關這樣的情景：

在每個堆疊上下文，下面層塗上後到前的順序：

背景和元素的邊界形成堆疊上下文。

孩子堆疊負面堆棧級別的情況下（最負面的第一個）。

流入式，非內聯式，非定位後代。

非定位花車。

流入內聯級別的未定位後代，包括內聯表和內聯塊。

子堆疊上下文與堆電平0，並與層疊級別的定位後代0

子堆疊上下文具有正堆水平（至少正的第一）。

在＃6中，「孩子堆疊內容」指的是半透明元件，並且位於後裔是固定元件。一旦您在固定元素上設置了z-index，它就會落在＃7之下，從而確保它會出現在半透明內容上。

來源

2014-07-17 11:37:32 BoltClock

非常非常有趣。感謝您指點我正確的方向。因此，就我而言，基本上，堆疊上下文（基於透明度創建）僅贏得了固定位置div，因爲它稍後出現在HTML中。我通過顛倒它們出現在html中的順序（並將固定位置的div添加到「top：0px」）來驗證這一點，並且獲得了所需的效果，而不必將z-index指定給定位的div - 請參閱[這裏]（http://jsfiddle.net/zJKaW/8/） – Alphonso

CSS屬性「不透明」的古怪行爲

回答

相關問題