CSS Layers – Tutorials Art

CSS layers refer to applying the z-index property to elements that overlap with each other. The z-index property can be specified with an integer value (positive, zero, or negative), which represents the position of the element along the z-axis.

CSS Layers (z-index)

The z-index property, when used in conjunction with the position property, enables you to specify which element should appear on top in the event of an overlap. An overlap can easily occur when using the position property, and this is often desirable when creating advanced layouts.

div {
    width: 90px;
    height: 150px;
    position: relative;
  }

Z index (important!)

When no z-index property is specified, elements are rendered on the default rendering layer 0 (zero).
If several elements share the same z-index value (i.e., they are placed on the same layer), stacking rules explained in the section Stacking without the z-index property apply.
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).

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