z-index
The z-index CSS property specifies the stack level of the box in the current stacking context and whether the box establishes a local stacking context.
CSS
JS
object.style.zIndex = "value";
Values
<'z-index'> = auto | <integer> | inherit
auto
Automatically specified by the user agent.
<integer>
Specifies one or more decimal digits (0-9).
inherit
Specifies the same value as the parent.
Initial
auto
integer
<!doctype html>
<html>
<head>
<style>
img {
position: absolute;
}
img:nth-of-type(1) {
background-color: red;
z-index: 3;
}
img:nth-of-type(2) {
background-color: green;
left: 40px;
z-index: 2;
}
img:nth-of-type(3) {
background-color: blue;
left: 80px;
z-index: 1;
}
</style>
</head>
<body>
<img alt="Happy Face" src="/assets/png/HappyFace.png">
<img alt="Happy Face" src="/assets/png/HappyFace.png">
<img alt="Happy Face" src="/assets/png/HappyFace.png">
</body>
</html>
JS
<!doctype html>
<html>
<head>
<style>
img {
position: absolute;
}
img:nth-of-type(1) {
background-color: red;
}
img:nth-of-type(2) {
background-color: green;
left: 40px;
}
img:nth-of-type(3) {
background-color: blue;
left: 80px;
}
</style>
<script>
function mouseover(value) {
var elements = document.getElementsByTagName("img");
for (var i = 0; i < elements.length; ++i) {
elements[i].style.zIndex = value;
if (value == "integer") {
elements[i].style.zIndex = elements.length - i;
}
}
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="auto">
<input onmouseover="mouseover(value)" type="button" value="integer"><br>
<img alt="Happy Face" src="/assets/png/HappyFace.png">
<img alt="Happy Face" src="/assets/png/HappyFace.png">
<img alt="Happy Face" src="/assets/png/HappyFace.png">
</body>
</html>