Today, I encountered a surprising scenario where an element with a transform property that was not set to none failed to stack above another element with a position of absolute, despite having a higher z-index. However, adding either position:absolute or position:relative to the former element resolved this issue and allowed the z-index to function as anticipated between them.
Upon inspection, I noticed that in the example below, the green square (which had a transform:translateX(0)) did not stack above all other elements as expected due to its highest
z-index</code value. Instead, it only stacked above the blue square preceding it in the DOM. This behavior seemed peculiar, possibly due to both squares having a <code>z-indexdiv {
opacity:0.8;
width:100px;
height:100px;
}
body {
margin:10px;
}<div style="background-color:blue; position:absolute; top:0px; left:0px; z-index:0;">
</div>
<div style="background-color:green; transform:translateX(0); z-index:2;">
</div>
<div style="background-color:red; position:absolute; top:20px; left:20px; z-index:1;">
</div>Expectations were set for all elements mentioned to be part of the root stacking context. The underlying reason behind this anomaly remains unclear.