z-index (CSS property)
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Buggy | Buggy | Full | Full |
| Inherited | Initial | Version |
|---|---|---|
| No | auto |
CSS2 |
Example
This style rule makes the element
with ID "warning" absolutely positioned and assigns it
a higher stack level than its siblings:
#warning {
position: absolute;
z-index: 1;
}Description
This property specifies the
stack level of a box whose position value is one of
absolute, fixed, or
relative.
The stack
level refers to the position of the box along the z
axis, which runs perpendicular to the display. The higher the value, the
closer the box is to the user; in other words, a box with a high
z-index will obscure a box with a lower
z-index occupying the same location along the
x and y axes.
See Stacking Contexts for more information about stacking contexts.
Value
An integer value—which can be
negative—sets the stack level of the box in the current stacking context,
and also establishes a new stacking context. The box itself has stack
level 0 (zero) in the new context.
The value
auto gives the box the same stack level as its
parent, and doesn’t establish a new stacking context.
Compatibility
| IE | 5.5 | Buggy |
|---|---|---|
| 6.0 | Buggy | |
| 7.0 | Buggy | |
| Firefox | 1.0 | Buggy |
| 1.5 | Buggy | |
| 2.0 | Buggy | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
In Internet Explorer
for Windows versions up to and including 6, select
elements always appear on top of everything else; their stack level can’t
be changed.
Internet Explorer for Windows versions up to and including 7 always use the nearest positioned ancestor to determine the stacking context for the element in question.
Internet Explorer for
Windows version 7 treats the value auto as if it were
0 (zero).
Internet Explorer for Windows versions up to and
including 7 don’t support the value inherit.
In Firefox versions up to and including 2, a negative stack level positions the box behind the stacking context, rather than above the context’s background and borders and below block-level descendants in the normal flow.
User-contributed notes
- ID:
- #1
- Date:
- Fri, 07 Dec 2007 15:53:07 GMT
While not strictly a CSS problem, this problem often crops up when trying to position with CSS: Flash content will display above all other content by default, regardless of the z-index settings of the flash and/or the CSS-positioned content. The workaround for this is to explicitly set the Flash's window-mode to the default option of 'opaque', but this does not work in all browsers.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
