CSS GUIDE Z INDEX

From CDOT Wiki
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>
  <div class="x">LAYER 1</div>
  <div class="y">LAYER 2</div>
 </body>
 
</html>

Notes

Specification Conformance

Browser Compatibility

Firefox,Netscape,Opera,IE

See Also

position