How to organize the use of the z-index attribute?

Question

One thing I’ve always found in CSS to be the most disorganized thing is the use of z-index.

Often some frameworks/libraries, or even some developers, place an exaggerated value on z-index, causing problems with their organization.

I always wondered, for example, if there was a way to catch the z-index maximum used throughout the document (I imagine that if possible, only by Javascript). For example, if the element a uses z-index 2 and the b uses 3, there would be some way to capture the 3 and its element?

Another thing: Is there any alternative, pattern or organization to avoid confusion regarding the use of z-index? Currently, I practically have to remember where, in each part of the project, I defined the attributes z-index and increasing "mentally".

Is there any easier way to organize the use of a z-index in a large project to avoid overlapping disorders? Is there any other attribute?

Observing: I even remember asking you something like, but this time the doubt is another.

Answer 1

Dude I’m not going to give a super thorough answer, but I’m just going to directly address.

You can have a stack of z-index for each sequence element pai>filho>neto. If Father has position:relative, children and grandchildren, will have the z-index "indexed" to the parent. As @Bacco commented, you may have an element with z-index:999 below a z-index: -1;

Take the example

.box {
  width: 100px;
  height: 100px;
  background-color: rgba(0,0,255,0.25);
  border: 1px solid #000;
  position: absolute;
  z-index: 999;
}
.box:nth-of-type(2) {
  background-color: rgba(0,255,0,0.25);
  top: 100px;
  left: 20px;
}
.filho {
  width: 50px;
  height: 50px;
  top: -10px;
  left: -10px;
  position: absolute;
  z-index: -1;
  background-color: red;
}

<div class="box">
  z-index: 999;
</div>
<div class="box">
  <div class="filho">
    z-index: -1
  </div>
</div>

---

A way to keep things under control

You can create utilities of z-index to help you. In your project you can establish a number X maximum overlap in the eixo Z as Material Design does for example. https://material.io/design/environment/elevation.html#Elevation-in-material-design

So in your code you could have something like below.

.z1 {
  z-index: 1;
}
.z2 {
  z-index: 2;
}
.z3 {
  z-index: 3;
}

<div class="box z1">
  <div class="filho z1"></div>
  <div class="filho z2"></div>
</div> 

That way you don’t put a z-index for each class in CSS, you put a class of z-index for each element in HTML. That’s not a rule! It’s just a methodology that can be interesting for you or not. In my view putting z1, z2 in HTML classes it is more intuitive to understand how stack of eixo Z is progressing. But it’s still a way to keep track of the z-index, but always remembering the stack relative shown above...

An illustrative image to visually perceive with the aid of shadow like the eixo Z can behave.