Скачать или смотреть WTF is wrong with z-index | Solve your z-index issues | Stacking Context

If we want the layered order to be different from the DOM order, we can use the z-index property to manually reorder elements.
z-index only works with positioned elements*. It will have no effect on an element being rendered in Flow layout.
The default value of the z-index property is auto, which is equivalent to the number 0. Therefore, any value greater than 0 can be used to "promote" an element to sit in front of its siblings.
In the video above, we saw how we can create a stacking context by combining a non-static position with a z-index. This isn't the only way, however!
https://developer.mozilla.org/en-US/d...

To debug these type of issues checkout this awesome browser extension
https://github.com/andreadev-it/stack...

Codepen links in the demo

https://codepen.io/kumarsandeep91/pen...

https://codepen.io/kumarsandeep91/pen...