Hi, I am trying to create an isometric tile and I would like to give it kind of 3d look.
Something like this:
These are two divs stacked on top of each other.
However I wanted to achieve the same using ::after pseudo element, problem is after element is displayed on top of its parent and I have no idea why it’s not following z-index.
See following codepen: https://codepen.io/Spell2az/pen/XVMLMZ ,
Replace div::after with below and check
Thank you, that would work, but question remains, why is z-index property being ignored or rather what stacking rules are being followed, I have read this https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index but still, it does not make sense why after is on top of the parent.
this worked…thank you @pseudop…awesome link