Revision 194887 of Adding z-index

  • Revision slug: Talk:CSS/Understanding_z-index/Adding_z-index
  • Revision title: Adding z-index
  • Revision id: 194887
  • Created:
  • Creator: Mozcerize
  • Is current revision? No
  • Comment clarification

Revision Content

The example on this page is incorrect. The property "z-index" only applies to positioned elements in CSS 2.1 (see specs), and so div#5, which is explicitly unpositioned in this example, should have it's "z-index: 8" ignored, and appear underneath the others. This is confirmed in CSS-compliant browsers. The example would be correct if either div#5 were positioned "for the sake of being positioned" by using "position: relative" and including no top, bottom, left, right offsets, or—unofficially, alluded to in the specs as a possibility for CSS 3—if it had its opacity set. In the picture accompanying the example, the opacity has been set (although this isn't what is specified in the source code) and hence div#5 in the picture became a stacking context and had its z-index honoured.

To clarify the opacity thing: it is stated in the previous page Understanding_CSS_z-index:Stacking_and_float that

In the example below, all the blocks except the non-positioned one, are translucent show the stacking order. If the opacity of the non-positioned block (DIV #4) is reduced, then something strange happens: the background and border of that block pops up above the floating blocks, but still under positioned blocks. I was not able to understand whether this is a bug or a peculiar interpretation of the specifications. (Applying opacity could implictly create a stacking context.)

Indeed, it's veyy possible that browsers will assume that applying opacity creates a stacking context (because it has been suggested in the CSS 2.1 specs). It certainly seems to happen in Firefox 1.5 and other Mozilla browsers, which is presumably where the image in the example came from.

As for how z-index works, the next page (Understanding_CSS_z-index:The_stacking_context) states that Positioning and assigning a z-index value to an HTML element creates a stacking context which is slightly ambiguous; these characteristics together create a stacking context. {{mediawiki.external('That is, the \"and\" in the sentence is \"logical\" AND whereas in casual English \"and\" can sometimes mean logical OR.')}} A little further down, the article states that only positioned and z-indexed elements create stacking contexts, which again is ambiguous. To reinforce the logical AND-ness, this statement would be better written "only positioned, z-indexed elements...". Perhaps this ambiguity arose from the language translation of the original article, but it is consistent with the problems with the example given on this page, and with the statement given near the bottom of Understanding_CSS_z-index:Stacking_context_example_1: DIV #1 and DIV #3 are not translucent. It is important to remember that assigning an opacity less than 1 to a positioned element implicitly creates a stacking context, just like adding a z-index value. It's simply incorrect to say that the z-index property (alone) creates a stacking context. Further, on Understanding_CSS_z-index:Stacking_context_example_3 it is stated that The first-level menu is only relatively positioned, so no stacking context is created. In casual English usage, the implication of this statement is that no stacking context is created because the menu is relatively positioned (as opposed to absolutely positioned) when in fact the reason is that the menu is positioned but not z-indexed.

Then again, I'm no CSS expert, and so I could be completely wrong with this whole thing! I'm reading these articles because I'm trying to learn the z-index stuff myself! --Mozcerize 14:09, 28 November 2006 (PST)

Revision Source

<p>The example on this page is incorrect. The property "z-index" only applies to <i>positioned</i> elements in CSS 2.1 (see <a class="external" href="http://www.w3.org/TR/REC-CSS2/visuren.html#z-index">specs</a>), and so div#5, which is explicitly unpositioned in this example, should have it's "z-index: 8" ignored, and appear underneath the others. This is confirmed in CSS-compliant browsers. The example would be correct if either div#5 were positioned "for the sake of being positioned" by using "position: relative" and including no top, bottom, left, right offsets, or—unofficially, alluded to in the specs as a possibility for CSS 3—if it had its opacity set. In the picture accompanying the example, the opacity <i>has</i> been set (although this isn't what is specified in the source code) and hence div#5 in the picture became a stacking context and had its z-index honoured.
</p><p>To clarify the opacity thing: it is stated in the previous page <a href="en/Understanding_CSS_z-index/Stacking_and_float">Understanding_CSS_z-index:Stacking_and_float</a> that
</p>
<dl><dd><i>In the example below, all the blocks except the non-positioned one, are translucent show the stacking order. If the opacity of the non-positioned block (DIV #4) is reduced, then something strange happens: the background and border of that block pops up above the floating blocks, but still under positioned blocks. I was not able to understand whether this is a bug or a peculiar interpretation of the specifications. (Applying opacity could implictly create a stacking context.)</i>
</dd></dl>
<p>Indeed, it's veyy possible that browsers will assume that applying opacity creates a stacking context (because it has been suggested in the <a class="external" href="http://www.w3.org/TR/REC-CSS2/visuren.html#z-index">CSS 2.1 specs</a>). It certainly seems to happen in Firefox 1.5 and other Mozilla browsers, which is presumably where the image in the example came from.
</p><p>As for how z-index works, the next page (<a href="en/Understanding_CSS_z-index/The_stacking_context">Understanding_CSS_z-index:The_stacking_context</a>) states that <i>Positioning and assigning a z-index value to an HTML element creates a stacking context</i> which is slightly ambiguous; these characteristics <i>together</i> create a stacking context. {{mediawiki.external('That is, the \"and\" in the sentence is \"logical\" AND whereas in casual English \"and\" can sometimes mean logical OR.')}} A little further down, the article states that <i>only positioned and z-indexed elements create stacking contexts</i>, which again is ambiguous. To reinforce the logical AND-ness, this statement would be better written "only positioned, z-indexed elements...". Perhaps this ambiguity arose from the language translation of the original article, but it is consistent with the problems with the example given on this page, and with the statement given near the bottom of <a href="en/Understanding_CSS_z-index/Stacking_context_example_1">Understanding_CSS_z-index:Stacking_context_example_1</a>: <i>DIV #1 and DIV #3 are not translucent. It is important to remember that assigning an opacity less than 1 to a positioned element implicitly creates a stacking context, just like adding a z-index value.</i> It's simply incorrect to say that the z-index property (alone) creates a stacking context. Further, on <a href="en/Understanding_CSS_z-index/Stacking_context_example_3">Understanding_CSS_z-index:Stacking_context_example_3</a> it is stated that <i>The first-level menu is only relatively positioned, so no stacking context is created.</i> In casual English usage, the implication of this statement is that no stacking context is created because the menu is relatively positioned (as opposed to absolutely positioned) when in fact the reason is that the menu is positioned but not z-indexed.
</p><p>Then again, I'm no CSS expert, and so I could be completely wrong with this whole thing! I'm reading these articles because I'm trying to learn the z-index stuff myself! --<a href="User:Mozcerize">Mozcerize</a> 14:09, 28 November 2006 (PST)
</p>
Revert to this revision