- specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
Note: z-index only works on positioned elements ( {position: absolute}, {position: relative}, {position: fixed}, or {position: sticky}) and flex items (elements that are direct children of {display:flex} elements). Note: If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top.
CSS syntax : z-index: auto | number | initial | inherit;
Property values:
auto : sets the stack order equal to its parents. This is default
number : sets the stack order of the element. Negative numbers are allowed
initial : sets this property to its default value.
inherit : inherits this property from its parent element
JavaScript syntax: object.style.zIndex="-1"
example: z-index property
The z-index Property
Because the image has a z-index of 1, it will be placed in front of the heading.
code:
<div>
<h4>The z-index Property</h4>
<img src="../../pics/search.png" width="140" height="140"><br>
<p>Because the image has a z-index of 1, it will be placed in front of the heading.</p>
</div>
<style>
img {position: absolute; left: 6vw;top: 40vw; z-index: 1;}
</style>
