/

HTML / CSS / JavaScript Tutorial

CSS Property: z-index

[this page | pdf | back links]

The CSS (CSS1) z-index property specifies the stack order of an element, i.e. which is “in front of” other elements, and hence which is visible if several would otherwise appear in the same place. Elements with higher stack order (z-index value) are shown in preference to ones with lower stack order. It only works on positioned elements, i.e. with position:absolute, position:relative or position:fixed.

 

Valid property values (other than inherit and initial) are:

 

Value

Description

number

Stack order set to a specified value (which can be negative)

auto

(default value). Stack order of element set to the same as its parent’s stack order

 

Default Value:

auto

JavaScript syntax:

e.g. object.style.zIndex="-1"

Inherited:

No

Animatable:

Yes

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
div.x1 {border: 2px solid red; width: 40px; height: 30px; background-color: yellow; position: absolute; top: 0px}
div.x2 {border: 2px solid red; width: 40px; height: 30px; background-color: yellow; position: absolute; top: 40px}
div.x3 {border: 2px solid red; width: 40px; height: 30px; background-color: yellow; position: absolute; top: 80px}
div.y1 {border: thin solid green; width: 220px; height: 20px; background-color: orange; position: absolute;
        text-align: center; left: 35px; top: 3px; }
div.y2 {border: thin solid green; width: 220px; height: 20px; background-color: orange; position: absolute;
        text-align: center; left: 35px; top: 43px; }
div.y3 {border: thin solid green; width: 220px; height: 20px; background-color: orange; position: absolute;
        text-align: center; left: 35px; top: 83px; }
div.x2 {z-index: 1;}
</style>
</head>
<body>
<div class="x1">&nbsp;</div><div class="y1">Element with default property</div>
<div class="x2">&nbsp;</div><div class="y2">Property set using HTML</div>
<div class="x3" id="zIndexAdj">&nbsp;</div><div class="y3">Property set using JavaScript</div>

<script>
document.getElementById("zIndexAdj").style.zIndex = "1";
</script>

</body>
</html>

FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyZIndex() {
  var x = document.createElement("DIV"); x.style.zIndex = "1"; return (window.getComputedStyle(x, null).zIndex == "1");
}


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile