HTML elements are the first and most important contact point of our programming with the browser, the screen reader or the SEO bot. They transport the structural information of the data that we want to display.

Since today we can change the order and also the appearance with CSS at any time, we tend to forget that the order of the HTML elements also has a great influence on the rendering of the page. The following applies here by default: The sibling that later appears in the DOM is always placed over the previous siblings.

This knowledge already saves us a headache or two if we want to influence exactly this stacking with a z-index!

CSS stacking context

Apart from CSS specificity, there is another very interesting and complicated concept: the stacking context. The mentioned order of the HTML elements only refers to a specific context. Within this context, HTML elements with a z-index can be influenced in such a way that, for example, an underlying element is brought to the foreground. However, elements in different contexts cannot swap positions among themselves.

See MDN for deeper explanation.

In more complex SPAs in particular, it can happen that you quickly find yourself in a tangle of contexts from which you can no longer find your way out so easily. So you should be really careful right from the start and build HTML structures and components with a bit of a foresight. And since the opacity and transform properties show up really quickly in CSS, it's a good idea to keep this topic in the back of your mind!

One very important thing to mention here is the following rule:
Element with a position value absolute or relative
and z-index value other than auto.

I repeat:
... AND z-index value other than auto! So as long as you don't mess with the stacking order by using z-index, it's perfectly safe to position an element!

Photo by Sean Stratton on Unsplash