mozilla

Compare Revisions

z-index

Change Revisions

Revision 8458:

Revision 8458 by BijuGC on

Revision 8459:

Revision 8459 by Jürgen Jeka on

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

Revision 8458
Revision 8459
n10    <h3 name="Summary">n10    <h3>
n14      The z-index property specifies the z-order of an element ann14      The <code>z-index</code> CSS property specifies the z-order
>d its descendants. When elements overlap, z-order determines whic> of an element and its descendants. When elements overlap, z-orde
>h one covers the other. An element with a larger z-index generall>r determines which one covers the other. An element with a larger
>y covers an element with a lower one.> z-index generally covers an element with a lower one.
nn16    <p>
17      For a positioned box, the <code>z-index</code> property spe
 >cifies:
18    </p>
19    <ol>
20      <li>The stack level of the box in the current stacking cont
 >ext.
21      </li>
22      <li>Whether the box establishes a local stacking context.
23      </li>
24    </ol>
n28    <h3 name="Syntax">n37    <h3>
n31    <p>n40    <pre>
32      z-index: auto | &lt;integer&gt; | <a href="en/CSS/inherit">41z-index:  auto | &lt;integer&gt; | inherit
>inherit</a> 
42</pre>
33    </p>43    <h3>
34    <h3 name="Values">
n39        auto&nbsp;n48        auto
n42        The element is drawn at the same z-order as an element win51        The box does not establish a new local stacking context. 
>th <code>z-index: 0</code>. It does <i>not</i> create a new stack>The stack level of the generated box in the current stacking cont
>ing context.>ext is the same as its parent's box.
n45        &lt;integer&gt;&nbsp;n54        &lt;integer&gt;
n48        The element is drawn at the z-order given. It also createn57        This integer is the stack level of the generated box in t
>s a new stacking context, which means that all of its descendants>he current stacking context. The box also establishes a local sta
> also draw at that z-index. This means that the z-indexes of desc>cking context in which its stack level is <code>0</code>. This me
>endants are not compared to the z-indexes of elements outside thi>ans that the z-indexes of descendants are not compared to the z-i
>s element.>ndexes of elements outside this element.
n51    <h3 name="Examples">n60    <h3>
n54    <h3 name="Notes">n63    <div style="border:dashed; position:relative; z-index:1; heig
 >ht:8em; margin-bottom:1em">
64      position:relative; z-index:1; <span style="background:light
 >green; position:absolute; z-index:3; left:20em; top:-25px; height
 >:7em; opacity:0.9">position:absolute; z-index:3;<br>
65      left:20em; top:-25px; opacity:0.9</span> <span style="backg
 >round:gold; position:absolute; z-index:2; left:60px; top:3em;">po
 >sition:absolute; z-index:2; left:60px; top:3em;</span>
66    </div>
67    <h3>
n58      Negative <code>z-index</code> values are supported correctln71      Negative <code>z-index</code> values are supported correctl
>y starting in <a href="en/Gecko">Gecko</a> 1.9 / <a href="en/Fire>y starting in <a href="/en/Gecko" title="en/Gecko">Gecko</a> 1.9 
>fox_3">Firefox 3</a>. Previous versions implemented the CSS 2 beh>/ <a href="/en/Firefox_3_for_developers" title="en/Firefox_3_for_
>avior, not the CSS 2.1 behavior that is compatible with other bro>developers">Firefox 3</a>. Previous versions implemented the CSS 
>wsers.>2 behavior, not the CSS 2.1 behavior that is compatible with othe
 >r browsers.
n60    <h3 name="Specifications">n73    <h3>
n65        <a class="external" href="http://www.w3.org/TR/CSS21/visun78        <a class="external" href="http://www.w3.org/TR/CSS21/visu
>ren.html#propdef-z-index">CSS 2.1</a>>ren.html#z-index" title="http://www.w3.org/TR/CSS21/visuren.html#
 >z-index">CSS 2.1 Visual formatting #z-index</a>
n68    <h3 name="Browser_compatibility">n81    <h3>
n71    <h3 name="See_also">n84    <table class="standard-table">
85      <tbody>
86        <tr>
87          <th>
88            Browser
89          </th>
90          <th>
91            Lowest Version
92          </th>
93        </tr>
94        <tr>
95          <td>
96            Internet Explorer
97          </td>
98          <td>
99            4.0
100          </td>
101        </tr>
102        <tr>
103          <td>
104            Firefox (Gecko)
105          </td>
106          <td>
107            1.0 (1.0)
108          </td>
109        </tr>
110        <tr>
111          <td>
112            Opera
113          </td>
114          <td>
115            4.0
116          </td>
117        </tr>
118        <tr>
119          <td>
120            Safari (WebKit)
121          </td>
122          <td>
123            1.0 (85)
124          </td>
125        </tr>
126      </tbody>
127    </table>
128    <h3>
tt133    </p>
134    <p>
76    </p>{{ languages( { "fr": "fr/CSS/z-index", "pl": "pl/CSS/z-i135      {{ languages( { "fr": "fr/CSS/z-index", "pl": "pl/CSS/z-ind
>ndex" } ) }}>ex" } ) }}
136    </p>

Back to History