html - 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 闭包是错误的，但是定位也是错误的。取出左边并使顶部上升您想要重叠的像素数。

<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>