Compare Revisions

z-index

Change Revisions

Revision 236017:

Revision 236017 by teoli on

Revision 8465:

Revision 8465 by tregagnon on

Title:
z-index
z-index
Slug:
CSS/z-index
CSS/z-index
Tags:
css, "CSS Reference", NeedsMobileBrowserCompatibility
css, "CSS Reference", NeedsMobileBrowserCompatibility
Content:

Revision 236017
Revision 8465
n10    <h2>n10    <h2 id="Summary">
n27        <nobr><dfn>{{ Xref_cssinitial() }}:</dfn> {{ Cssxref("autn27        <dfn>{{ Xref_cssinitial() }}:</dfn> {{ Cssxref("auto") }}
>o") }}</nobr> 
28      </li>
29      <li>28      </li>
30        <nobr><dfn>Applies to:</dfn> {{ Cssxref("position", "posi
>tioned elements") }}</nobr> 
31      </li>29      <li>
30        <dfn>Applies to:</dfn> {{ Cssxref("position", "positioned
 > elements") }}
32      <li>31      </li>
33        <nobr><dfn>{{ Xref_cssinherited() }}:</dfn> no</nobr>
34      </li>32      <li>
33        <dfn>{{ Xref_cssinherited() }}:</dfn> no
35      <li>34      </li>
36        <nobr><dfn>Media:</dfn> {{ Xref_cssvisual() }}</nobr>
37      </li>35      <li>
36        <dfn>Media:</dfn> {{ Xref_cssvisual() }}
38      <li>37      </li>
38      <li>
39        <nobr><dfn>{{ Xref_csscomputed() }}:</dfn> as specified</39        <dfn>{{ Xref_csscomputed() }}:</dfn> as specified
>nobr> 
n42    <h2>n42    <h2 id="Syntax">
43      <nobr>Syntax</nobr>43      Syntax
n46<nobr>z-index:  auto | &lt;integer&gt; | inheritn46z-index:  auto | &lt;integer&gt; | inherit
47</nobr>
n49    <h3>n48    <h3 id="Values">
50      <nobr>Values</nobr>49      Values
n54        <nobr>auto</nobr>n53        auto
n57        <nobr>The box does not establish a new local stacking conn56        The box does not establish a new local stacking context. 
>text. The stack level of the generated box in the current stackin>The stack level of the generated box in the current stacking cont
>g context is the same as its parent's box.</nobr>>ext is the same as its parent's box.
n60        <nobr>&lt;integer&gt;</nobr>n59        &lt;integer&gt;
n63        <nobr>This integer is the stack level of the generated bon62        This integer is the stack level of the generated box in t
>x in the current stacking context. The box also establishes a loc>he current stacking context. The box also establishes a local sta
>al stacking context in which its stack level is <code>0</code>. T>cking context in which its stack level is <code>0</code>. This me
>his means that the z-indexes of descendants are not compared to t>ans that the z-indexes of descendants are not compared to the z-i
>he z-indexes of elements outside this element.</nobr>>ndexes of elements outside this element.
n66    <h2>n65    <h2 id="Examples">
67      <nobr>Examples</nobr>66      Examples
n70      <nobr>position:relative; z-index:1; <span style="backgroundn69      position:relative; z-index:1; <span style="background:light
>:lightgreen; position:absolute; z-index:3; left:20em; top:-25px; >green; position:absolute; z-index:3; left:20em; top:-25px; height
>height:7em; opacity:0.9">position:absolute; z-index:3;<br>>:7em; opacity:0.9">position:absolute; z-index:3;<br>
71      left:20em; top:-25px; opacity:0.9</span> <span style="backg70      left:20em; top:-25px; opacity:0.9</span> <span style="backg
>round:gold; position:absolute; z-index:2; left:60px; top:3em;">po>round:gold; position:absolute; z-index:2; left:60px; top:3em;">po
>sition:absolute; z-index:2; left:60px; top:3em;</span></nobr>>sition:absolute; z-index:2; left:60px; top:3em;</span>
n73    <h2>n72    <h2 id="Specifications">
74      <nobr>Specifications</nobr>73      Specifications
n78        <nobr><a class="external" href="http://www.w3.org/TR/CSS2n77        <a class="external" href="http://www.w3.org/TR/CSS21/visu
>1/visuren.html#z-index" title="http://www.w3.org/TR/CSS21/visuren>ren.html#z-index" title="http://www.w3.org/TR/CSS21/visuren.html#
>.html#z-index">CSS 2.1 Visual formatting #z-index</a></nobr>>z-index">CSS 2.1 Visual formatting #z-index</a>
nn80    <h2 id="Browser_compatibility">
81      Browser compatibility
81    <h2>82    </h2>
82      <nobr>Browser compatibility</nobr>
83    </h2>83    <p>
84    <p>
85      <nobr>{{ CompatibilityTable() }}</nobr>84      {{ CompatibilityTable() }}
n183    <h3>n182    <h3 id="Gecko_Notes">
184      <nobr>Gecko Notes</nobr>183      Gecko Notes
n187      <nobr>Negative <code>z-index</code> values are supported con186      Negative <code>z-index</code> values are supported correctl
>rrectly starting in <a href="/en/Gecko" title="en/Gecko">Gecko</a>y starting in <a href="/en/Gecko" title="en/Gecko">Gecko</a> 1.9 
>> 1.9 / <a href="/en/Firefox_3_for_developers" title="en/Firefox_>/ <a href="/en/Firefox_3_for_developers" title="en/Firefox_3_for_
>3_for_developers">Firefox 3</a>. Previous versions implemented th>developers">Firefox 3</a>. Previous versions implemented the CSS 
>e CSS 2 behavior, not the CSS 2.1 behavior that is compatible wit>2 behavior, not the CSS 2.1 behavior that is compatible with othe
>h other browsers.</nobr>>r browsers.
188    </p>
189    <h2>187    </p>
190      <nobr>See also</nobr>188    <h2 id="See_also">
189      See also
nn192      <li>CSS {{ Cssxref("position") }} property
193      <li>193      </li>
194        <nobr>CSS {{ Cssxref("position") }} property</nobr>
195      </li>194      <li>
196      <li>
197        <nobr><a href="/en/CSS/Understanding_z-index" title="en/C195        <a href="/en/CSS/Understanding_z-index" title="en/CSS/Und
>SS/Understanding_z-index">Understanding CSS z-indexes</a></nobr>>erstanding_z-index">Understanding CSS z-indexes</a>
t201      <nobr>{{ languages( { "fr": "fr/CSS/z-index", "pl": "pl/CSSt199      {{ languages( { "fr": "fr/CSS/z-index", "pl": "pl/CSS/z-ind
>/z-index", "pt": "pt/CSS/z-index" } ) }}</nobr>>ex", "pt": "pt/CSS/z-index" } ) }}

Back to History