Difference between revisions of "CSS GUIDE Z INDEX"

From CDOT Wiki
Jump to: navigation, search
(Usage Examples)
(Usage Examples)
Line 51: Line 51:
 
   </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>
 +
</nowiki>
 
</html>
 
</html>
  

Revision as of 16:20, 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

border-style

border

border-top

border-right

border-bottom

border-left