Difference between revisions of "CSS GUIDE Z INDEX"
(→Usage Examples) |
(→Specification Conformance) |
||
(3 intermediate revisions by the same user not shown) | |||
Line 31: | Line 31: | ||
== Usage Examples == | == Usage Examples == | ||
− | <html> | + | <html> |
<head> | <head> | ||
<style type="text/css"> | <style type="text/css"> | ||
Line 51: | Line 51: | ||
</style> | </style> | ||
</head> | </head> | ||
+ | <nowiki> | ||
<body> | <body> | ||
<div class="x">LAYER 1</div> | <div class="x">LAYER 1</div> | ||
<div class="y">LAYER 2</div> | <div class="y">LAYER 2</div> | ||
</body> | </body> | ||
− | </html> | + | </nowiki> |
+ | </html> | ||
== Notes == | == Notes == | ||
Line 61: | Line 63: | ||
== Specification Conformance == | == Specification Conformance == | ||
− | |||
− | |||
== Browser Compatibility == | == Browser Compatibility == | ||
Line 70: | Line 70: | ||
== See Also == | == See Also == | ||
− | [[ | + | [[CSS_GUIDE_POSITION|position]] |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− |
Latest revision as of 15:23, 4 December 2006
This document is a work in progress and is subject to change.
Contents
Summary
Z-index property sets the stack order of an element. An element with a greater stack order is placed on top of an element with a lower stack order. Negative numbers are also valid. Z-index only works on elements that have been set with absolute position.
Syntax
z-index: [number]
Legal Values
Value | Description |
---|---|
auto | Stack number is equal to its parent |
number | Define a custom stack number |
Mozilla Recommended Values
Usage Examples
<html> <head> <style type="text/css"> div.x{ position:absolute; left:0px; top:0px; font-size:80px; z-index:-1; } div.y{ position:absolute; left:0px; top:10px; font-size:80px; color:red; z-index:1; } </style> </head> <body> <div class="x">LAYER 1</div> <div class="y">LAYER 2</div> </body> </html>
Notes
Specification Conformance
Browser Compatibility
Firefox,Netscape,Opera,IE