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"> </div><div class="y1">Element with default property</div>
<div class="x2"> </div><div class="y2">Property set using HTML</div>
<div class="x3" id="zIndexAdj"> </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