解決CSS3的opacity屬性帶來的層疊順序問題

潛行者m 發(fā)布時(shí)間：2016-05-09 11:47:36 作者：于江水

這篇文章主要介紹了解決CSS3的opacity屬性帶來的層疊順序問題的方法,主要針對(duì)opacity的屬性值小于1的層會(huì)覆蓋在其他層之上的問題,需要的朋友可以參考下

在最近的一個(gè)作品中，在使用 opacity 屬性來實(shí)現(xiàn)頁面整體透明的時(shí)候，發(fā)現(xiàn)了一個(gè)問題。如果兩個(gè)層發(fā)生了重疊，使用了 opacity 屬性并且屬性值小于1的層，會(huì)覆蓋掉后面的層。于是動(dòng)手做了個(gè)實(shí)驗(yàn)，來驗(yàn)證 opacity 的層次。

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

發(fā)現(xiàn)問題

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

CSS Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html>
<html>
<head>
<title>帶有 opacity 的層疊問題</title>
<style>
html{padding:40px;}
.dd{width:100px;height:100px;}
a{background:red;}
b{background:blue;margin-left:20px;margin-top:-80px;}
c{background:green;margin-left:40px;margin-top:-80px;}
</style>
</head>
<body>
<div id=”a”></div>
<div id=”b”></div>
<div id=”c”></div>
</body>
</html>

保存為 html 文件打開之后，可以看到正常的次序
201659114759301.png (261×261)

這時(shí)候，我們?yōu)?#a 加上屬性 opacity：0.9 神奇的事情發(fā)生了，它覆蓋了另外兩個(gè)層
201659114904237.png (254×236)

只有當(dāng)為另一個(gè)層（例如：#c）也設(shè)置一個(gè)小于1的opacity值（例如：0.8）之后，后面的 #c 才能安裝正常的規(guī)則覆蓋在 #a 上面。
201659114922238.png (246×227)

這樣，增加了小于1的 opacity 屬性的層，升高了一個(gè)層次。至于里面的科學(xué)原理，我沒有想明白，或許也可能是一個(gè)小BUG。但是有時(shí)候這種情況是我們不希望發(fā)生的。

解決問題

那么如何來解決這個(gè)問題呢？前面也說過了，正常的情況下，指定了 position 并且指定了 z-index 值的層，擁有比普通層更高的層次，那么指定 opacity 的層和指定了 position 的層相比呢？我們對(duì) #b 加上 position：relative 看看。這時(shí)候的樣式代碼如下：

CSS Code復(fù)制內(nèi)容到剪貼板

#a{background:red;opacity:0.9;}
b{background:blue;margin-left:20px;margin-top:-80px;position:relative;}
c{background:green;margin-left:40px;margin-top:-80px;opacity:0.8;}

保存刷新后，看到效果是這樣的：
201659115005366.png (266×223)

也就是說，對(duì)層使用 position 屬性的 relative 之后，可以使其層次和 opacity 相同，這樣之后，按照正常的排序進(jìn)行層疊顯示（在后面的實(shí)驗(yàn)中，我對(duì) absolute 屬性值也做了測(cè)試，結(jié)果和 relative 屬性值表現(xiàn)的相同）。當(dāng)我們?nèi)∠?#c 的 opacity 屬性之后，我們可以看到，#c 被排在了最下面。
201659115026857.png (244×235)

還沒有完，之前只是對(duì) #b 激活了position：relative 屬性，還沒有使用 z-index。我們對(duì) #b 進(jìn)行了 z-index 的設(shè)置（例如：100），很顯然的，#b 成為了最頂層。
201659115042775.png (217×215)

得出結(jié)論：

使用了position屬性值為 absolute、relative 的層，將會(huì)比普通層更高層次。使用了小于1的opacity屬性的層，也比普通層更高層次并且和指定 position 的層同層，但是不支持 z-index 屬性，所以指定 position 的層，可以使用 z-index 屬性，來覆蓋帶有小于1的 opacity 屬性的層。