Compare Revisions

Adding z-index

Revision 46828:

Revision 46828 by Waltonad0283 on

Revision 46829:

Revision 46829 by Mozcerize on

Title:
Adding z-index
Adding z-index
Slug:
CSS/Understanding_z-index/Adding_z-index
CSS/Understanding_z-index/Adding_z-index
Tags:
css, Understanding_CSS_z-index
css, Understanding_CSS_z-index
Content:

Revision 46828
Revision 46829
n11      The first example, <i>Stacking without z-index</i>, explainn11      The first example, <i>Stacking without z-index</i>, explain
>s how stacking is arranged by default. If you want to specify a d>s how stacking is arranged by default. If you want to specify a d
>ifferent stacking order, you have to use the z-index property.>ifferent stacking order, you have to position an element and use 
 >the z-index property.
n17      <b>The above is incorrect!</b> z-index only applies if an en17      <b>Warning!</b> z-index only has an effect if an element is
>lement is positioned. The image below displays a bug in Firefox t> positioned (see <a href="Talk:en/Understanding_CSS_z-index/Addin
>hat has since been fixed. Since #normdiv has no positioning it do>g_z-index">discussion</a>). The explanation below, including the 
>es not matter what its z-index is and it is stacked as if it had >image below, is erroneously influenced by a bug in Firefox 2 and 
>no z-index specified (in this case, under everything else). (Edit>below that has since been fixed.<sup><span class="nowiki">[</span
> by another user - FF seems to not support a negative z-index val>> <a href="en/Understanding_CSS_z-index/Adding_z-index#bug">1</a>
>ue)><span class="nowiki">]</span></sup> Since DIV #5 (#normdiv) has n
 >o positioning it does not matter what its z-index is and it is st
 >acked as if it had no z-index specified (in this case, under ever
 >ything else).
n58      <img alt="Example of stacking rules modified using z-index"n58      <img alt="Example of stacking rules modified using z-index"
> src="File:en/Media_Gallery/Understanding_zindex_03.png">> fileid="912" src="File:en/Media_Gallery/Understanding_zindex_03.
 >png">
nn170    <h4 name="Footnotes">
171      Footnotes
172    </h4>
173    <p id="bug">
174      1. In addition to any bugs, the behaviour of Firefox 2 and 
 >below regarding stacking contexts and z-index reflects the CSS 2 
 >Specification which was significantly changed in the CSS 2.1 Cand
 >idate Recommendation. In particular, the treatment of stacking co
 >ntexts with negative z-index values is very different (rendered b
 >elow the parent context's background) from the CSS 2.1 behaviour 
 >exhibited in Firefox 3 (rendered above the parent context's backg
 >round).
175    </p>
t182    </div>{{ wiki.languages( { "fr": "fr/Comprendre_le_z-index_ent188    </div>{{ languages( { "fr": "fr/Comprendre_le_z-index_en_CSS/
>_CSS/Ajout_de_z-index" } ) }}>Ajout_de_z-index" } ) }}

Back to History