在最近的乙個作品中，utumai在使用 opacity 屬性來實現頁面整體透明的時候，發現了乙個問題。如果兩個層發生了重疊，使用了 opacity 屬性並且屬性值小於1的層，會覆蓋掉後面的層。於是動手做了個實驗，來驗證 opacity 的層次。
網頁中的層疊規律是這樣的：如果兩個層都沒有定義 position 屬性為 absolute 或者 relative 屬性，哪個層的html**放在後面，哪個層就顯示在上面。如果指定了 position 屬性，並且設定了 z-index 屬性，誰的值大，誰就在上面。
發現問題
而對於沒有啟用 z-index 的普通層來說，如果那個層使用了屬性值小於1的 opacity 屬性，哪個層就會顯示在上面。我們做乙個demo。**如下：
css code複製內容到剪貼簿
儲存為 html 檔案開啟之後，可以看到正常的次序
這時候，我們為 #a 加上屬性 opacity：0.9 神奇的事情發生了，它覆蓋了另外兩個層
只有當為另乙個層（例如：#c）也設定乙個小於1的opacity值（例如：0.8）之utumai後，後面的 #c 才能安裝正常的規則覆蓋在 #a 上面。
這樣，增加了小於1的 opacity 屬性的層，公升高了乙個層次。至於裡面的科學原理，我沒有想明白，或許也可能是乙個小bug。但是有時候這種情況是我們不希望發生的。
解決問題
那麼如何來解決這個問題呢？前面也說過了，正常的情況下，指定了 position 並且指定了 z-iwww.cppcns.comndex 值的層，擁有比普通層更高的層次，那麼指定 opacity 的層和指定了 position 的層相比呢？我們對 #b 加上 position：relative 看看。這時候的樣式**如下：
css code複製內容到剪貼簿
儲存重新整理後，看到效果是這樣的：
也就是說，對層使用 position 屬性的 relative 之後，可以使其層次和 opacity 相同，這樣之後，按照正常的排序進行層疊顯示（在後面的實驗中，我對 absolute 屬性值也做了測試，結果和 relative 屬性值表現的相同）。當我們取消了 #c 的 opacity 屬性之後，我們可以看到，#c 被排在了最下面。
還沒有完，之前只是對 #b 啟用了position：relative 屬性，還沒有使用 z-index。我們對 #b 進行了 z-index 的設定（例如：100），很顯然的，#b 成為了最頂層。
得出結論：
使用了position屬性值為 absolute、relative 的層，將會比普通層更高層次。使用了小於1的opacity屬性的層，也比普通層更高層次並且和指定 position 的層同層，但是不支援 z-index 屬性，所以指定 position 的層，可以使用 z-index 屬性，來覆蓋帶有小於1的 opacity 屬性的層。
本文標題: 解決css3的opacity屬性帶來的層疊順序問題
本文位址: /web/css/84401.html
詳解CSS3的opacity屬性設定透明效果的用法
css3 opacity 屬性的功能是用來控制網頁元素的透明效果 調整不透明度 早期網頁設計常常會用到許多的透明效果，通常都是透過 png 圖層來製作透明的感覺，現在網頁設計師可以使用 css3 opacity 屬性來輕鬆的達到網頁元素不透明度的調整，css3 opacity 屬性的語法非常簡單，只...
CSS3中的變形處理 transform 屬性
在css3中，可以利用transform功能來實現文字或影象的旋轉 扭曲 縮放 位移 矩陣 原點 這六種型別的變形處理，下面將詳細講解transform的使用。變形 旋轉 rotate div.box 順時針旋轉45度 變形 扭曲 skew div.box 通過skew 函式將長方形變成平行四邊形。...
CSS3中關於background一些屬性及連寫
background image 它允許為背景新增乙個或者乙個漸變顏色 這裡注意漸變色屬於image 而不是color 下面我們寫乙個漸變色的div看看實際用法 main 關於image的用法很簡單 主要講解一下漸變中的引數 第乙個為角度 與我們數學中的x y 軸方向相同 0度則為y軸正方向所以漸變...