Difference between revisions of "CSS GUIDE Z INDEX"
(→Specification Conformance) |
|||
| (4 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"> | ||
| − | x{ | + | div.x{ |
position:absolute; | position:absolute; | ||
left:0px; | left:0px; | ||
| Line 41: | Line 41: | ||
z-index:-1; | z-index:-1; | ||
} | } | ||
| − | y{ | + | div.y{ |
position:absolute; | position:absolute; | ||
left:0px; | left:0px; | ||
top:10px; | top:10px; | ||
font-size:80px; | font-size:80px; | ||
| + | color:red; | ||
z-index:1; | z-index:1; | ||
} | } | ||
</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 60: | Line 63: | ||
== Specification Conformance == | == Specification Conformance == | ||
| − | |||
| − | |||
== Browser Compatibility == | == Browser Compatibility == | ||
| Line 69: | 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
