z-index

Overview

W3C

Properties

background

background-attachment

The z-index property specifies the stack level of the box in the current stacking context and whether the box establishes a local stacking context.

CSS2


                                z-index: auto | <integer> | inherit

Initial:	auto
Applies To:	positioned elements
Inherited:	no
Percentages:	NA
Media:	visual

Values
DOM
Example | Values | auto
Example | Values | integer
Example | DOM
Reference


                                z-index: value;


Value:	Description:
auto	Stack level of the generated box in the current stacking context is the same as its parent's box and the box does not establish a new local stacking context
inherit	Takes the same computed value as the property for the element's parent
integer	Stack level of the generated box in the current stacking context and the box also establishes a local stacking context in which its stack level is 0


                                [window.]document.getElementById("element-id").style.zIndex = "z-index";

<html>
  <head>
    <title>z-index</title>
  </head>
  <body>
    <a href="/" onmouseover="mouseover1();">auto</a>
    <a href="/" onmouseover="mouseover2();">integer</a><br>
    <img alt="Happy Face" id="id1" src="/assets/png/HappyFace.png">
    <img alt="Happy Face" id="id2" src="/assets/png/HappyFace.png">
    <img alt="Happy Face" id="id3" src="/assets/png/HappyFace.png">
  </body>
  <script type="text/javascript">
    function mouseover1() {
      document.getElementById("id1").style.zIndex = "auto";
      document.getElementById("id2").style.zIndex = "auto";
      document.getElementById("id3").style.zIndex = "auto";
    }
    function mouseover2() {
      document.getElementById("id1").style.zIndex = "3";
      document.getElementById("id2").style.zIndex = "2";
      document.getElementById("id3").style.zIndex = "1";
    }
    document.getElementById("id1").style.backgroundColor = "red";
    document.getElementById("id1").style.position        = "absolute";
    document.getElementById("id2").style.backgroundColor = "green";
    document.getElementById("id2").style.left            = "0.5in";
    document.getElementById("id2").style.position        = "absolute";
    document.getElementById("id3").style.backgroundColor = "blue";
    document.getElementById("id3").style.left            = "1in";
    document.getElementById("id3").style.position        = "absolute";
  </script>
</html>

W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

CSS

Values

DOM

Example | Values | auto

Example | Values | integer

Example | DOM

Reference