For a positioned box, the ‘
z-index‘ property specifies:
- 1. The stack level of the box in the current stacking context.
- 2. Whether the box establishes a local stacking context.
Values have the following meanings:
- 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 is ‘
- The stack level of the generated box in the current stacking context is the same as its parent’s box. The box does not establish a new local stacking context.
- A box is at the same stack level as its parent’s unless it is given a different stack level through the
z-indexapplies only to objects that have the position property set to
- Assigning an
opacityvalue less than 1 to a positioned element implicitly creates a stacking context, just like adding a
If there is no
z-index specified, elements are stacked in the following order (from back to front):
- boxes in the normal flow, according to the sequence in the source code,
- floating boxes,
- positioned boxes, according to the sequence in the source code.
In stacking context talk, the expression "in front of" means closer to the user as the user faces the screen.
z-indexvalues, you are doing it wrong.
In IE 6/7, any relatively positioned element that has haslayout set to true establishes a stacking context.
One may visualize this IE bug in the playground by setting [
A] and [
position:relative, while [
position:relative; z-index:1. Now, dragging [
A] under [
B] hides [
a] – in Internet Explorer, that is. Any positioned child with a
z-index is caught by this wrong stacking context of its parent.