Opacity 属性引发的层叠问题

大家好，又见面了，我是你们的朋友全栈君。

有很长一段时间没有更新博客了，近一段时间开始重新梳理知识点和写博客了，新的博客地址：欢迎访问。

一般情况下，网页中的层叠规律是这样的：如果两个层都没有设置 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 属性的层。