The z-index
CSS property specifies the z-order of a positioned element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.
/* Keyword value */ z-index: auto; /* <integer> values */ z-index: 0; z-index: 3; z-index: 289; z-index: -1; /* Negative values to lower the priority */ /* Global values */ z-index: inherit; z-index: initial; z-index: unset;
For a positioned box (that is, one with any position
other than static
), the z-index
property specifies:
- The stack level of the box in the current stacking context.
- Whether the box establishes a local stacking context.
<div class="container"> <div class="block position1 text-top">z-index: auto</div> <div class="block position2 text-top">z-index: auto</div> <div class="block position3 text-top">z-index: auto</div> </div> <div class="container"> <div class="block position1 text-bottom" style="z-index:3">z-index: 3</div> <div class="block position2 text-bottom" style="z-index:2">z-index: 2</div> <div class="block position3 text-bottom" style="z-index:1">z-index: 1</div> </div>
* { box-sizing: border-box; } .container { display: inline-block; width: 250px; position: relative; } .block { width: 150px; height: 75px; position: absolute; font-family: monospace; background-color: #E5E8FC; border: solid 5px #112382; } .text-top { padding: 0.5em 0 5em .5em; } .text-bottom { padding: 4em 0 1.5em .5em; } .position1 { top: 0; left: 0; } .position2 { top: 30px; left: 30px; } .position3 { top: 60px; left: 60px; }
The example above shows the effect of z-index
. On the left we've drawn three boxes and made them overlap using absolute positioning. By default, the elements are stacked following the order they're declared in the HTML. On the right we have the same markup, but have reversed the default order using z-index
.
Initial value | auto |
---|---|
Applies to | positioned elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | an integer |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Creates stacking context | yes |
Syntax
The z-index
property is specified as either the keyword auto
or an <integer>
.
Values
auto
- The box does not establish a new local stacking context. The stack level of the generated box in the current stacking context is the same as its parent's box.
<integer>
- This
<integer>
is the stack level of the generated box in the current stacking context. The box also establishes a local stacking context in which its stack level is0
. This means that the z-indexes of descendants are not compared to the z-indexes of elements outside this element.
Formal syntax
auto | <integer>
Examples
HTML
<div class="dashed-box">Dashed box <span class="gold-box">Gold box</span> <span class="green-box">Green box</span> </div>
CSS
.dashed-box { position: relative; z-index: 1; border: dashed; height: 8em; margin-bottom: 1em; margin-top: 2em; } .gold-box { position: absolute; z-index: 3; /* put .gold-box above .green-box and .dashed-box */ background: gold; width: 80%; left: 60px; top: 3em; } .green-box { position: absolute; z-index: 2; /* put .green-box above .dashed-box */ background: lightgreen; width: 20%; left: 65%; top: -25px; height: 7em; opacity: 0.9; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Transitions The definition of 'animation behavior for z-index' in that specification. |
Working Draft | Defines z-index as animatable. |
CSS Level 2 (Revision 1) The definition of 'z-index' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 4.0 | 4.0 | 1.0 |
Negative values (CSS2.1 behavior, not allowed in the obsolete CSS2 spec) | 1.0 | (Yes) | 3.0 (1.9) | 4.0 | 4.0 | 1.0 |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | (Yes) | ? | ? | ? | ? |
Negative values (CSS2.1 behavior, not allowed in the obsolete CSS2 spec) | ? | (Yes) | ? | ? | ? | ? |
See also
- CSS
position
property - Understanding CSS z-indexes
Document Tags and Contributors
Tags:
Contributors to this page:
wbamberg,
mfluehr,
arronei,
erikadoyle,
roryokane,
NicolasGoudry,
Sebastianz,
LightGuard,
mdrburke,
fscholz,
Manojkr,
Syle91,
Mats.Palmgren,
null---,
polarix,
tregagnon,
kscarfone,
teoli,
Sheppy,
ethertank,
cohadar,
Jürgen Jeka,
BijuGC,
Kyodev,
Nickolay,
DBaron,
Waltonad0283,
Mgjbot,
Mozcerize,
Edoceo
Last updated by:
wbamberg,