0

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?

Counterexample

codingbryan
  • 40
  • 1
  • 10
  • Sorry, but why has this question been closed? My question is specifically why the versioning method doesn't work with my counterexample not why the child element doesn't appear above the blue div. Can this please be re-opened? – codingbryan Apr 01 '20 at 08:30
  • 1
    your interpretation of versionning is wrong. I closed with a question that explain how z-index works. Read the full answer carefully and you will understand everything – Temani Afif Apr 01 '20 at 08:40
  • after carefull reading you will see that most important part you are missing is *Each stacking context is self-contained: after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context.* which is included in the MDN link and my answer – Temani Afif Apr 01 '20 at 08:44
  • @TemaniAfBut I know how the z-index works. I know why the blue div appears above the yellow div, but using the versioning method it would suggest it should appear below which is incorrect of course, but that's my question! – codingbryan Apr 01 '20 at 08:44
  • @TemaniAfif The final bullet point in the notes section suggests otherwise. It uses versions to compare divs outside of the stacking context and even goes on to list them all. – codingbryan Apr 01 '20 at 08:46
  • one question (forget about the yellow div): between the red and blue one having both z-index:0 which one should be on the top? – Temani Afif Apr 01 '20 at 08:48
  • @TemaniAfif The blue one would as it appears later in the html. – codingbryan Apr 01 '20 at 08:54
  • @TemaniAfif My question has been answered below. I still don't think its a duplicate, but sure, thanks. – codingbryan Apr 01 '20 at 08:56
  • you have your anwser then, the yellow cannot be on the top because it belong to the stacking context of the red one. Exactly the same in the MDN example, where the element with z-index:6 cannot be on the top of the element of z-index:5 because it belong to a stacking context having z-index equal to 4 --> 4.6 below 5 AND 0.1 below 0 – Temani Afif Apr 01 '20 at 08:56
  • it's a duplicate because it's the canonical one dealing with all the aspect of z-index and stacking context. If you want another funny result, remove the z-index:0 from red and the yellow will now become on the top of blue (you cannot explain this with your versionning but with my duplicate) – Temani Afif Apr 01 '20 at 08:58
  • @UR982T You should also read Temani's answer, it covers a lot more detail which you might encounter later on while dealing with z-index. – Utsav Patel Apr 01 '20 at 09:00
  • @TemaniAfif My mistake was using the version numbers as actual numbers which follow inequalities but shouldn't be as Utsav has explained. – codingbryan Apr 01 '20 at 09:00
  • @UtsavPatel I will, thanks. – codingbryan Apr 01 '20 at 09:03

1 Answers1

1

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.

Utsav Patel
  • 2,789
  • 1
  • 16
  • 26
  • The final bullet point in the Notes section on the MDN specifically uses the version method to compare a child element to another div that is outside of the stacking context of the parent. It even goes on to list the divs with their respective version numbers to compare them all so I think your "You are comparing the yellow div with blue div. This is incorrect." is actually incorrect. – codingbryan Apr 01 '20 at 08:35
  • @UR982T Please read this : 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`. Directly from the bullet point you mention. – Utsav Patel Apr 01 '20 at 08:41
  • But isn't that precisely the issue? I've assigned the yellow div a version number of 0.1, but the blue div has a version number of 0 which according to the version method should make it appear below the yellow one. However, that is not how the z-index works.. – codingbryan Apr 01 '20 at 08:52
  • It says `underneath parent's major version`. It does not matter whether it 0.1 or 0.100 , it simply means it cannot go beyond 0 (parent's z-index in this case). You are comparing absolute numeral values, which is incorrect. – Utsav Patel Apr 01 '20 at 08:54
  • Ah, that answers my question. Could you perhaps update your answer? Thanks! – codingbryan Apr 01 '20 at 08:55