mozilla

Compare Revisions

Adding z-index

Change Revisions

Revision 194886:

Revision 194886 by Mozcerize on

Revision 194887:

Revision 194887 by Mozcerize on

Title:
Adding z-index
Adding z-index
Slug:
Talk:CSS/Understanding_z-index/Adding_z-index
Talk:CSS/Understanding_z-index/Adding_z-index
Content:

Revision 194886
Revision 194887
n8      I don't understand the example on this page. The property "n8      The example on this page is incorrect. The property "z-inde
>z-index" only applies to <i>positioned</i> elements in CSS 2.1 (s>x" only applies to <i>positioned</i> elements in CSS 2.1 (see <a 
>ee <a class="external" href="http://www.w3.org/TR/REC-CSS2/visure>class="external" href="http://www.w3.org/TR/REC-CSS2/visuren.html
>n.html#z-index">specs</a>), and so div#5, which is explicitly unp>#z-index">specs</a>), and so div#5, which is explicitly unpositio
>ositioned in this example, should have it's "z-index: 8" ignored,>ned in this example, should have it's "z-index: 8" ignored, and a
> and appear underneath the others. This is confirmed in CSS-compl>ppear underneath the others. This is confirmed in CSS-compliant b
>iant browsers. The example would be correct if div#5 were positio>rowsers. The example would be correct if either div#5 were positi
>ned "for the sake of being positioned", ie using "position: relat>oned "for the sake of being positioned" by using "position: relat
>ive" but including no top, bottom, left, right offsets.>ive" and including no top, bottom, left, right offsets, or—unoffi
 >cially, 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 specifi
 >ed in the source code) and hence div#5 in the picture became a st
 >acking context and had its z-index honoured.
n11      Similarly, the next page (<a href="en/Understanding_CSS_z-in
>ndex/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 a 
>rticle states that <i>only positioned and z-indexed elements crea 
>te stacking contexts</i>, which again is ambiguous. To reinforce  
>the logical AND-ness, this statement would be better written "onl 
>y positioned, z-indexed elements...". Perhaps this ambiguity aros 
>e from the language translation of the original article, but it i 
>s consistent with the seemingly incorrect example given on this p 
>age, and the statement given near the bottom of <a href="en/Under 
>standing_CSS_z-index/Stacking_context_example_1">Understanding_CS 
>S_z-index:Stacking_context_example_1</a>: <i>DIV #1 and DIV #3 ar 
>e 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> Again, it 
>'s incorrect to say that the z-index property creates a stacking  
>context. Further, on <a href="en/Understanding_CSS_z-index/Stacki 
>ng_context_example_3">Understanding_CSS_z-index:Stacking_context_ 
>example_3</a> it is stated that <i>The first-level menu is only r 
>elatively positioned, so no stacking context is created.</i> In c 
>asual English usage, this statement implies that no stacking cont 
>ext is created because the menu is relatively positioned (as oppo 
>sed to absolutely positioned) when in fact the reason is that the 
> menu is positioned but not z-indexed. 
12    </p>
13    <p>
14      On a separate note, it is stated in the previous page <a hr11      To clarify the opacity thing: it is stated in the previous 
>ef="en/Understanding_CSS_z-index/Stacking_and_float">Understandin>page <a href="en/Understanding_CSS_z-index/Stacking_and_float">Un
>g_CSS_z-index:Stacking_and_float</a> that>derstanding_CSS_z-index:Stacking_and_float</a> that
t22      Well, it's possible that browsers will assume that applyingt19      Indeed, it's veyy possible that browsers will assume that a
> opacity creates a stacking context (because it has been suggeste>pplying opacity creates a stacking context (because it has been s
>d in the <a class="external" href="http://www.w3.org/TR/REC-CSS2/>uggested in the <a class="external" href="http://www.w3.org/TR/RE
>visuren.html#z-index">CSS 2.1 specs</a>.>C-CSS2/visuren.html#z-index">CSS 2.1 specs</a>). It certainly see
 >ms to happen in Firefox 1.5 and other Mozilla browsers, which is 
 >presumably where the image in the example came from.
20    </p>
21    <p>
22      As for how z-index works, the next page (<a href="en/Unders
 >tanding_CSS_z-index/The_stacking_context">Understanding_CSS_z-ind
 >ex:The_stacking_context</a>) states that <i>Positioning and assig
 >ning a z-index value to an HTML element creates a stacking contex
 >t</i> which is slightly ambiguous; these characteristics <i>toget
 >her</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 furt
 >her down, the article states that <i>only positioned and z-indexe
 >d elements create stacking contexts</i>, which again is ambiguous
 >. To reinforce the logical AND-ness, this statement would be bett
 >er written "only positioned, z-indexed elements...". Perhaps this
 > ambiguity arose from the language translation of the original ar
 >ticle, but it is consistent with the problems with the example gi
 >ven 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>DI
 >V #1 and DIV #3 are not translucent. It is important to remember 
 >that assigning an opacity less than 1 to a positioned element imp
 >licitly creates a stacking context, just like adding a z-index va
 >lue.</i> It's simply incorrect to say that the z-index property (
 >alone) creates a stacking context. Further, on <a href="en/Unders
 >tanding_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 co
 >ntext is created.</i> In casual English usage, the implication of
 > this statement is that no stacking context is created because th
 >e menu is relatively positioned (as opposed to absolutely positio
 >ned) when in fact the reason is that the menu is positioned but n
 >ot z-indexed.

Back to History