zIndex Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:zIndex

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. zIndex

Description

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

Property Values

Value Description
autoThe browser sets the stack order of the element. This is default
number sets 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.

Technical Details

Item Value
Default Value: auto
Return Value: A String, representing the stack order of an element
CSS VersionCSS2

Change the stack order of an <img> element:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

<h1>This is a Heading</h1>

<img id="img1" src="http://java2s.com/resources/c.png" style="position:absolute;left:0px;top:0px;z-index:-1;width:100px;height:180px;">

<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {//from   www. java 2  s .c o  m
    document.getElementById("img1").style.zIndex = 2;
}
</script>

</body>
</html>

Related Tutorials