CSS GUIDE Z INDEX

From CDOT Wiki
Revision as of 16:20, 4 December 2006 by Dtolj (talk | contribs) (Usage Examples)
Jump to: navigation, search

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>
LAYER 1
LAYER 2
</body>

</html>

Notes

Specification Conformance

CSS1

Browser Compatibility

Firefox,Netscape,Opera,IE

See Also

border-style

border

border-top

border-right

border-bottom

border-left