有很長一段時間沒有更新博客了，近一段時間開始重新梳理知識點和寫博客了，新的博客地址：歡迎訪問。
一般情況下，網頁中的層疊規律是這樣的：如果兩個層都沒有設置 position 屬性爲 absolute 或者 relative 屬性，哪個層的HTML代碼放在後面，哪個層就顯示在上面。
Demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Opacity 屬性引發的層疊問題</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: red;
font-size: 100px;
line-height: 200px;
text-align: center;
color: #fff;
cursor: pointer;
}
.box2{
background-color: blue;
margin-left: 30px;
margin-top: -160px;
}
.box3{
background-color: green;
margin-left: 60px;
margin-top: -160px;
}
</style>
</head>
<body>
<div class="box box1" id="box1"></div>
<div class="box box2" id="box2"></div>
<div class="box box3" id="box3"></div>
</body>
</html>
這裏的三個div，box3在最上面，box1在最下面。如果指定了 position 屬性，並且設置了 z-index 屬性，誰的值大，誰就在上面。
當給box1設置opacity：0.8時，神奇的事情發生了，它覆蓋了另外兩個層。只有另外兩個div也設置了小於1的opacity值時，纔可以覆蓋box1。
Demo2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Opacity 屬性引發的層疊問題</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: red;
color: #fff;
cursor: pointer;
}
.box1{
opacity: 0.8;
}
.box2{
background-color: blue;
margin-left: 30px;
margin-top: -160px;
}
.box3{
background-color: green;
margin-left: 60px;
margin-top: -160px;
opacity: 0.7;
}
</style>
</head>
<body>
<div class="box box1" id="box1">box1</div>
<div class="box box2" id="box2">box2</div>
<div class="box box3" id="box3">box3</div>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
$("box1").onclick = function(){
alert("box1");
}
$("box2").onclick = function(){
alert("box2");
}
$("box3").onclick = function(){
alert("box3");
}
</script>
</body>
</html>
這個例子中的層疊順序box2在最下面，box3在最上面，box1在中間。因爲給box3設置了opacity: 0.7。這樣看不是很明顯，我們可以通過給每一個div綁定點擊事件來測試。
一般情況下，指定了 position 並且指定了 z-index 值的層，擁有比普通層更高的層次，那麼指定 opacity 的層和指定了 position 的層相比呢？我們對box2加上 position：relative 看看。
Demo3:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Opacity 屬性引發的層疊問題</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: red;
color: #fff;
cursor: pointer;
}
.box1{
opacity: 0.8;
}
.box2{
background-color: blue;
margin-left: 30px;
margin-top: -160px;
position: relative;
}
.box3{
background-color: green;
margin-left: 60px;
margin-top: -160px;
opacity: 0.7;
}
</style>
</head>
<body>
<div class="box box1" id="box1">box1</div>
<div class="box box2" id="box2">box2</div>
<div class="box box3" id="box3">box3</div>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
$("box1").onclick = function(){
alert("box1");
}
$("box2").onclick = function(){
alert("box2");
}
$("box3").onclick = function(){
alert("box3");
}
</script>
</body>
</html>
從上面的例子可以看出，對層使用 position 屬性的 relative 之後，可以使其層次和 opacity 相同，這樣之後，按照正常的排序進行層疊顯示（absolute 屬性值結果和 relative 屬性值表現的相同）。
當我們取消了bxo3的 opacity 屬性之後，我們可以看到，box3 被排在了最下面。如下圖所示：
Demo4:
這個例子中除了給box2設置position：relative 屬性，還使用了 z-index。我們對box2進行了 z-index 的設置（z-index: 100），這樣一來box2變成了最頂級的了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Opacity 屬性引發的層疊問題</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: red;
color: #fff;
cursor: pointer;
}
.box1{
opacity: 0.8;
}
.box2{
background-color: blue;
margin-left: 30px;
margin-top: -160px;
position: relative;
z-index: 100;
}
.box3{
background-color: green;
margin-left: 60px;
margin-top: -160px;
opacity: 0.7;
}
</style>
</head>
<body>
<div class="box box1" id="box1">box1</div>
<div class="box box2" id="box2">box2</div>
<div class="box box3" id="box3">box3</div>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
$("box1").onclick = function(){
alert("box1");
}
$("box2").onclick = function(){
alert("box2");
}
$("box3").onclick = function(){
alert("box3");
}
</script>
</body>
</html>
層疊問題總結
使用了 position 屬性值爲 absolute、relative 的層，將會比普通層更高層次。使用了小於1的 opacity 屬性的層，也比普通層更高層次並且和指定 position 的層同層，但是不支持 z-index 屬性，所以指定 position 的層，可以使用 z-index 屬性，來覆蓋帶有小於1的 opacity 屬性的層。