Difference between revisions of "CSS GUIDE Z INDEX"

From CDOT Wiki
Jump to: navigation, search
(Usage Examples)
(See Also)
Line 72: Line 72:
 
== See Also ==
 
== See Also ==
  
[[CSS_GUIDE_BORDER_STYLE|border-style]]
+
[[CSS_GUIDE_POSITION|position]]
 
 
[[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]]
 

Revision as of 16:23, 4 December 2006

This document is a work in progress and is subject to change.

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

CSS1

Browser Compatibility

Firefox,Netscape,Opera,IE

See Also

position