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>