1
edit
Changes
no edit summary
<span style="margin:0;background:#ffff33;font-size:120%;font-weight:bold;border:1px solid #a3b0bf;text-align:left;color:#000;padding:0.2em 0.4em;">This document is a work in progress and is subject to change.</span><br /><br />
== 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 ==
<table border = "1" width="350">
<tr>
<th>Value</th>
<th>Description</th>
</tr>
<tr>
<td>auto</td>
<td>Stack number is equal to its parent</td>
</tr>
<tr>
<td>number</td>
<td>Define a custom stack number</td>
</tr>
</table>
== Mozilla Recommended Values ==
== Usage Examples ==
<html>
<head>
<style type="text/css">
x{
position:absolute;
left:0px;
top:0px;
font-size:80px;
z-index:-1;
}
y{
position:absolute;
left:0px;
top:10px;
font-size:80px;
z-index:1;
}
</style>
</head>
<body>
<div class="x">LAYER 1</div>
<div class="y">LAYER 2</div>
</body>
</html>
== Notes ==
== Specification Conformance ==
[http://www.w3.org/TR/CSS1#border-width CSS1]
== Browser Compatibility ==
Firefox,Netscape,Opera,IE
== See Also ==
[[CSS_GUIDE_BORDER_STYLE|border-style]]
[[CSS_GUIDE_BORDER|border]]
[[CSS_GUIDE_BORDER_TOP|border-top]]
[[CSS_GUIDE_BORDER_RIGHT|border-right]]
[[CSS_GUIDE_BORDER_BOTTOM|border-bottom]]
[[CSS_GUIDE_BORDER_LEFT|border-left]]
== 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 ==
<table border = "1" width="350">
<tr>
<th>Value</th>
<th>Description</th>
</tr>
<tr>
<td>auto</td>
<td>Stack number is equal to its parent</td>
</tr>
<tr>
<td>number</td>
<td>Define a custom stack number</td>
</tr>
</table>
== Mozilla Recommended Values ==
== Usage Examples ==
<html>
<head>
<style type="text/css">
x{
position:absolute;
left:0px;
top:0px;
font-size:80px;
z-index:-1;
}
y{
position:absolute;
left:0px;
top:10px;
font-size:80px;
z-index:1;
}
</style>
</head>
<body>
<div class="x">LAYER 1</div>
<div class="y">LAYER 2</div>
</body>
</html>
== Notes ==
== Specification Conformance ==
[http://www.w3.org/TR/CSS1#border-width CSS1]
== Browser Compatibility ==
Firefox,Netscape,Opera,IE
== See Also ==
[[CSS_GUIDE_BORDER_STYLE|border-style]]
[[CSS_GUIDE_BORDER|border]]
[[CSS_GUIDE_BORDER_TOP|border-top]]
[[CSS_GUIDE_BORDER_RIGHT|border-right]]
[[CSS_GUIDE_BORDER_BOTTOM|border-bottom]]
[[CSS_GUIDE_BORDER_LEFT|border-left]]