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 属性的层。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/141263.html原文链接：https://javaforall.cn
腾讯云开发者
