Javascript DOM CSS Style zIndex Property

Introduction

Change the stack order of an <img> element: 

document.getElementById("img1").style.zIndex = "1";

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#img1 {/*ww  w.  jav a  2 s .  c o m*/
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1
}
</style>
</head>
<body>

<h1>This is a Heading</h1>

<img id="img1" src="image3.png" width="100" height="180">

<button type="button" onclick="myFunction()">Change stack order</button>

<p>Default z-index is 0. Z-index -1 has lower priority.</p>

<script>
function myFunction() {
  document.getElementById("img1").style.zIndex = "1";
}
</script>

</body>
</html>

The zIndex property sets or gets the stack order of a positioned element.

An element with greater stack order 1 is in front of another element with lower stack order 0.

A positioned element is an element with the position property set to: relative, absolute, or fixed.

This property can create overlapping elements.

Property Values

Value Description
autoThe browser determines the stack order of the element based on its order in the document. default
number An integer that defines the stack order of the element. Negative values are allowed
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The zIndex property returns a String representing the stack order of an element.




PreviousNext

Related