The 'version number' method for z-index from MDN doesn't work?
The MDN suggests using version numbers under the Stacking Context where a child element is given a version number (e.g. if child element has z-index of 6 and contained in a parent element with z-index 4 its version number would be 4.6). It uses this method to easily explain how a div outside of the parent/child stack of z-index 5 would appear above the child element of z-index 6 (as it has a version number of 4.6). However, I've constructed an example below which doesn't work using this method. The yellow div (z-index 1) is a child of the red div (z-index 0) and I've entered a blue div with z-index of 0. The version number method would suggest that the yellow div with version number 0.1 should appear above the blue div, but this of course wouldn't happen. Have I misunderstood the MDN or have I created a counterexample?
I think what the versioning method in MDN attempts to explain is this:
A child can never exceed its parent's z-index.
This means that child's z-index outside its parent is equal to the z-index of the parent.
You are comparing the yellow div with blue div. This is incorrect.
You should be comparing red div with blue div.
This is because red is parent to yellow, and outside red, yellow's z-index does not matter anymore.
If you want to display yellow div above, then you would have to increase the z-index of red such that it exceeds the z-index of blue.
At MDN, what I wrote above is summarised as this :
It is important to note that DIV #4, DIV #5 and DIV #6 are children of DIV #3, so stacking of those elements is completely resolved within DIV#3. Once stacking and rendering within DIV #3 is completed, the whole DIV #3 element is passed for stacking in the root element with respect to its sibling's DIV.
An easy way to figure out the rendering order of stacked elements along the Z axis is to think of it as a "version number" of sorts, where child elements are minor version numbers underneath their parent's major version numbers.