The z-index property for CSS specifies the stack level of the box in the current stacking context and whether the box establishes a local stacking context.
object.style.zIndex = "value"; <'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.
<!doctype html>
<html>
<head>
<style>
img
{
position: absolute;
}
img:nth-of-type(1)
{
background-color: red;
left: 0;
z-index: 3;
}
img:nth-of-type(2)
{
background-color: green;
left: 50px;
z-index: 2;
}
img:nth-of-type(3)
{
background-color: blue;
left: 100px;
z-index: 1;
}
</style>
</head>
<body>
<img alt="Happy" src="/assets/svg/Happy100.svg">
<img alt="Happy" src="/assets/svg/Happy100.svg">
<img alt="Happy" src="/assets/svg/Happy100.svg">
</body>
</html>
<!doctype html>
<html>
<head>
<style>
img
{
position: absolute;
}
img:nth-of-type(1)
{
background-color: red;
left: 0;
}
img:nth-of-type(2)
{
background-color: green;
left: 50px;
}
img:nth-of-type(3)
{
background-color: blue;
left: 100px;
}
</style>
</head>
<body>
<button>initial</button>
<button>auto</button>
<button>integer</button><br>
<img alt="Happy" src="/assets/svg/Happy100.svg">
<img alt="Happy" src="/assets/svg/Happy100.svg">
<img alt="Happy" src="/assets/svg/Happy100.svg">
<script>
function myfunction(myparameter)
{
const myproperty = myparameter.target.innerHTML;
const myimgs = document.querySelectorAll("img");
for(const [mykey, myimg] of myimgs.entries())
{
myimg.style.zIndex = myproperty;
if(myproperty == "integer")
{
myimg.style.zIndex = myimgs.length - mykey;
}
}
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>