z-index 不适用于元素的绝对定位

Question

我正在创建一个像堆叠卡片这样的组件，我将所有卡片定位为绝对但面临 z-index 属性的问题，卡片似乎没有相对于 z-index 改变。

 <div style="display:flex;justify-content:center;position:relative"> <div style="height:180px;width:280px;background-color:green;position:absolute;top:70px;z-index:100;box-shadow: 0px 0px 12px 0px black"/> <div style="height:180px;width:260px;background-color:blue;position:absolute;top:-20px;z-index:99;left:10px;box-shadow: 0px 0px 2px 0px black"/> <div style="height:180px;width:240px;background-color:red;position:absolute;top:-20px;z-index:98;left:10px;box-shadow: 0px 0px 2px 0px black"/> <div style="height:180px;width:220px;background-color:yellow;position:absolute;top:-20px;z-index:97;left:10px;box-shadow: 0px 0px 2px 0px black"/> </div>

Answer 1

div 关闭是错误的，但定位也是如此。 取出左边，使顶部 go 增加您想要重叠的像素数。

 <div style="display:flex;justify-content:center;position:relative"> <div style="height:180px;width:280px;background-color:green;position:absolute;top:70px;z-index:100;box-shadow: 0px 0px 12px 0px black"></div> <div style="height:180px;width:260px;background-color:blue;position:absolute;top:65px;z-index:99;box-shadow: 0px 0px 2px 0px black"></div> <div style="height:180px;width:240px;background-color:red;position:absolute;top:60px;z-index:98;box-shadow: 0px 0px 2px 0px black"></div> <div style="height:180px;width:220px;background-color:yellow;position:absolute;top:55px;z-index:97;box-shadow: 0px 0px 2px 0px black"></div> </div>