Style zIndexProperty
Style Object
Definition and Usage
The zIndex property sets or returns the stack order of a positioned element.
An element with a higher stack order (1) is always in front of an element with a lower stack order (0).
Tip:A positioned element is an element whose position property is set to: relative, absolute, or fixed.
Syntax
Set the zIndex property:
Object.style.zIndex="auto|number|inherit"
Return the zIndex property:
Object.style.zIndex
| Value | Description |
|---|---|
| auto | Default. The browser determines the stacking order of the element (based on the element's order in the document). |
| number | An integer that defines the stacking order of the element. Negative values can be used. |
| inherit | The value of the zIndex property is inherited from the parent element. |
Browser Support
All major browsers support the zIndex property.
Tips and Notes
Tip:This property is useful if you want to create overlapping elements.
Example
Example
Change the stack order of an <img> element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial(example.com)</title>
<style type="text/css">
#img1{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
<script>
function changeStackOrder(){
document.getElementById("img1").style.zIndex="1";
}
</script>
</head>
<body>
<h1>This is a heading</h1>
<img id="img1" src="bulbon.gif.html" width="100" height="180">
<input type="button" onclick="changeStackOrder()" value="Change stack order">
<p>The default z-coordinate is 0, and Z-coordinate -1 has a lower priority.</p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial(example.com)</title>
<style type="text/css">
#img1{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
<script>
function changeStackOrder(){
document.getElementById("img1").style.zIndex="1";
}
</script>
</head>
<body>
<h1>This is a heading</h1>
<img id="img1" src="bulbon.gif.html" width="100" height="180">
<input type="button" onclick="changeStackOrder()" value="Change stack order">
<p>The default z-coordinate is 0, and Z-coordinate -1 has a lower priority.</p>
</body>
</html>
Try it yourself »
Style Object Other Extensions