Hi Konstantin Rouda,

Thanks very much for the kind words, I’m glad you found it useful!

  1. So with CSS, any element that doesn’t have a position other than static , z-index will have no effect.

For example, the code z-index: -1; on its own will have no effect, but position: relative; z-index: -1; will work and (usually) “hide” an element behind its parent.

2. Yes you’re absolutely right that normally you can set a z-index: -1 and it will go below its parent element. However if that parent element forms a stacking context, it’s not possible to go below it regardless of z-index.

For example, one way to set a stacking context is to have an opacity other than 1. If we set opacity: 0.99 on a parent, then a child element with z-index: -1; position: relative; will no longer appear behind it.

Written by

Web developer — https://www.sargalias.com. Specialising in front end development. I love programming and strive to be the best software developer I can be.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store