Hi Konstantin Rouda,
Thanks very much for the kind words, I’m glad you found it useful!
- So with CSS, any element that doesn’t have a
z-indexwill 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
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.