Why is the z-index independent of the stacking context?

Question

An element with a high z-index can be below another element that has a low z-index, only because the z-index of the lower ancestor provides a higher stacking context for this element.

Because of this, it is not possible to overlay an element from a lower stacking context without significantly changing the CSS or HTML code. On the other hand, using the z-index property would be simple if it were an “absolute” value (higher z-index → ​​higher position on the z axis).

My question is: why was this implemented this way in browsers and standards?

Answer 1

I think cwolves has the correct answer, and now it is probably the most logical. To help understand, you can come up with z-index like Photoshop layers. If you have a layer folder above another folder, the wrapped layers obviously cannot be located outside their parents unless you move them from the folder to another.

Or think of boxes: you can arrange things inside a box, but you cannot arrange things from two different boxes unless you move them from a box to another.

If you are faced with a situation where you need a different agreement, you probably need to think about your markup to allow this.