本文探讨了CSS中层叠顺序的原理，特别是如何使用opacity属性影响元素的堆叠层级，并对比了与z-index属性的不同作用。
在最近的开发过程中，由于是关于文件上传的功能，需要两个Input框堆叠在一起，并有一个是透明的，然而就是一个opacity属性让我发现了元素的层叠顺序的问题，于是就动手试了一下，发现平民加了主角光环（opacity）就可以起到逆袭的作用：
首先为三个最普通不过的position为static的div以下称为小红小蓝小绿：
<style>
.box{
width: 100px;
height: 100px;
}
.box1{
background-color: red;
}
.box2{
margin-top: -80px;
margin-left: 20px;
background-color: green;
}
.box3{
margin-top: -80px;
margin-left: 40px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</body>
如图 我们可以看到，当position为static默认值的时候，小红小绿和小蓝就会乖乖按照前后顺序来排好队
但是，一个故事怎么会没有主角呢，没错我们给小红添加一个主角光环opacity: .8：
没错 奇迹出现了，小红成功从其他几个“屌丝”之中脱颖而出！
这时我们就会想到，如果我给小绿也加一个主角光环会怎么样呢？以下是我的实验结果：
不死心的我又试了几个
所以基本可以得出结果：
当元素都没有Opacity属性的时候，根据元素的前后顺序来决定层叠顺序（后面的在上），如果其中有一个元素定义了opacity属性，那他就会层叠在最上方，如果此时其他元素也有opacity属性，则会按照前后顺序来进行层叠
到这里还没有结束，因为还有一个属性z-index也可以给Position为relative或者absolute的元素提高层叠顺序的优先级，究竟opacity会不会影响z-index设置的值呢？
通过这张图我们可以发现，当给小蓝设置了opsition：relative的时候，小红和小蓝的优先级相同，按正常的后来者居上的原则来层叠，接下来我们设置一下z-index的值：
我们发现小绿由于z-index为2堆叠到了最上方，经过实验absolute与relative的效果一样。
也就是说：
定义了opacity属性的元素，层叠的优先级高于没有定义opacity属性的position:static的元素，等于position为relative或是absolute且默认z-index为1的元素，z-index越大，优先级就越高，这也是我们众所周知的。
扫一扫
3059
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
