Although we tend to regard a web page as a two-dimensional entity, boxes are positioned in three dimensions. The third dimension is the z axis, which is perpendicular to the screen.
Positioned elements can overlap, since they can be rendered at the same position. Each box has an associated stack level, which is its position along the z axis, and belongs to a stacking context. A box with a higher stack level is rendered “in front of” a box with a lower stack level; in other words, it’s rendered closer to a user facing the viewport. A stack level can also be negative.
We can specify the stack level via the
property. The value
auto means the box will have the
same stack level as its parent, and implies that the box doesn’t establish
a new stacking context. A value that’s provided as an integer specifies an
explicit stack level, and causes the box to establish a new local stacking
context. The box itself has the stack level 0 in this new context.
A stacking context consists of seven different layers (from bottom to top):
- the background and borders of the element that establishes the stacking context
- the stacking contexts of descendants with negative stack levels
- block-level descendants in the normal flow
- floated descendants and their contents
- inline-level descendants in the normal flow
- positioned descendants whose
- the stacking contexts of descendants with positive stack levels
A stacking context is also generated by any positioned element
(including relatively positioned elements) whose computed
z-index value is anything other than
Boxes within a stacking context can’t occur between two boxes that belong to another stacking context.
- Tue, 06 Jul 2010 09:04:20 GMT
@smartdub: No there is n need because all positioned elements get "auto" as the default so you would just be wasting space. It will make no difference to IE7 and under because they don't understand "auto" anyway and will use zero.
- Wed, 03 Mar 2010 17:04:48 GMT
After reading this, it sounds like a good idea to set a "z-index:auto;" to all the new HTML5 element in a dedicated Reset/Base CSS file.
- Fri, 21 Mar 2008 03:20:25 GMT
Positioning an element without explicit z-index value creates a new stacking context in Internet Explorer.