Cracking the Code: Why Your z-index Isn’t Behaving

Dealing with z-index issues in CSS can be quite challenging for many developers. Organising elements within the stacking context often turns out to be a frustrating experience. Picture this: you’re designing a news website and need to place the header below a breaking news banner while making sure the video player stays on top of other elements. What seems like a simple task can quickly become complicated. Using extremely high z-index values, like z-index: 999999, often leads to unexpected results.

To handle this effectively, it’s important to understand how z-index really works. This understanding helps you navigate potential issues and implement precise solutions, ensuring everything works smoothly.

For instance, when arranging two overlapping squares within the same parent container, you can easily control which one appears on top by giving it a higher z-index value. This approach is simple and avoids the common pitfalls of using excessively high z-index values.

<style>
  .wrapper {
    position: relative;
  }
  .blue-box {
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: 2;
    background: blue;
  }
  .green-box {
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: 1;
    background: green;
    left: 50px;
    top: 50px;
  }
</style>

<div class="wrapper">
  <div class="blue-box"></div>
  <div class="green-box"></div>
</div>

See this result 👇

Let’s do some changes in the code

<style>
  .wrapper {
    position: relative;
  }

  .dashed {
    position: relative;
    z-index: 1;
    border: 1px dashed #333;
    width: 120px;
    height: 120px;
  }

  .blue-box {
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: 3;
    background: blue;
  }

  .green-box {
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: 2;
    background: green;
    left: 50px;
    top: 50px;
  }
</style>

<div class="wrapper">
  <div class="dashed">
    <div class="blue-box"></div>
  </div>
  <div class="green-box"></div>
</div>

Um…what happened? Our dominant square is now wrapped in an additional parent element. In terms of CSS, this parent element has a smaller z-index than the green box, but the dominant blue box should still be on top as it has a higher z-index. So, where is the problem? Why isn’t the higher z-index working?

This is where the concept of the Stacking Context comes into play.

By default, a plain HTML document creates a context for arranging elements. This stacking context acts like a layer, allowing us to position elements relative to one another. Besides the default layer, we can create a new stacking context by assigning specific properties to elements. For example, using position: relative or position: absolute along with z-index creates a new layer.

We can only compare elements within the same parent layer. The z-index property is not global! When we create two elements, each with position: relative and an appropriate z-index, we generate two separate layers. Each of these layers contains nested elements, each with its own z-index and position: absolute.

Let’s fix our example. We want the blue box to appear above the green box. To do this, we need to remove the layer created by the dashed element using the properties position: relative and z-index. To maintain proper positioning, we'll keep position: relative, but we'll remove the z-index.

By removing the stacking context of the dashed element, we are left with three layers:

1. HTML document
2. Blue box
3. Green box

Nested in the default stacking context of the HTML document, the blue box and green box layers remain at the same level and can now be compared with each other.

Here is now corrected code:

<style>
  .wrapper {
    position: relative;
    }

  .dashed {
    position: relative;
    /* z-index: 1; */
    border: 1px dashed #333;
    width: 120px;
    height: 120px;
  }

  .blue-box {
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: 3;
    background: blue;
  }

  .green-box {
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: 2;
    background: green;
    left: 50px;
    top: 50px;
  }
</style>
<div class="wrapper">
  <div class="dashed">
    <div class="blue-box"></div>
  </div>
  <div class="green-box"></div>
</div>

Make a habit of identifying and understanding stacking contexts in your layout. Knowing when a new stacking context is created (e.g., with position, opacity, transform) will help you manage z-index effectively.

Read more on stacking contexts 👇

[embed]Stacking context - CSS: Cascading Style Sheets | MDN Stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the…developer.mozilla.org

So, that’s the lowdown on z-index and stacking contexts! Think of z-index as the traffic police of your CSS, directing which elements go up or down. But remember, even the best police need rules (stacking context) to do their job right.

Next time your header decides to play hide and seek behind a banner, take a moment, sip your chai, and channel your inner detective. Check those stacking contexts, review your z-index values, and maybe give yourself a pat on the back for not using z-index: 999999.

Happy coding! 😊