在最近的一個作品中，在使用 opacity 屬性來實現頁面整體透明的時候，發現了一個問題。如果兩個層發生了重疊，使用了 opacity 屬性并且屬性值小于1的層，會覆蓋掉后面的層。于是動手做了個實驗，來驗證 opacity 的層次。

網頁中的層疊規律是這樣的：如果兩個層都沒有定義 position 屬性為 absolute 或者 relative 屬性，哪個層的HTML代碼放在后面，哪個層就顯示在上面。如果指定了 position 屬性，并且設置了 z-index 屬性，誰的值大，誰就在上面。

發現問題

而對于沒有激活 z-index 的普通層來說，如果那個層使用了屬性值小于1的 opacity 屬性，哪個層就會顯示在上面。我們做一個Demo。代碼如下：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表