DEV Community

Rails Designer
Rails Designer

Posted on • Originally published at railsdesigner.com

2

Fix Any CSS Z-index Issue With This One Trick

This article was originally published on Rails Designer.


(apologies in advance for the title… 😉)

Z-index controls the stacking order of elements, to determine which elements appear on top of others in the visual layout. It allows you to create interesting UI’s and visual designs by creating depth (literally).

But create web-apps or sites for long enough and soon you come across a z-index issue. Over the years I’ve explored and used many techniques to battle them. From z-index maps (back in the SCSS days) to throwing in the towel and just adding z-index: 99999. (╯°□°)╯︵ ┻━┻

Let’s look at a common example.

<nav class="sticky top-0 z-10">
  Sticky Nav (z-index: 10)
</nav>

<div class="">
  <div class="relative z-20">
    Z-index content (z-index: 20)
  </div>
</div>

Enter fullscreen mode Exit fullscreen mode

The Z-index content will scroll “on top” of the nav element.

See the live preview on the original article

You might think to just change the nav’s z-index to 30 and call it a day. But we both know it’s not going to end well. 😉

The modern (and way more sane) way is to use the isolation property.

<nav class="sticky top-0 z-10">
  Sticky Nav (z-index: 10)
</nav>

<div class="isolate">
  <div class="relative z-20">
    Z-index content (z-index: 20)
  </div>
</div>

Enter fullscreen mode Exit fullscreen mode

This is using Tailwind CSS, but all you need to know is that the isolate class is the same as isolation: isolate;.

See the live preview on the original article

Once you learn about isolation: isolate; you see many other use cases for it in your apps.

Explore this article for more design tips for developers.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay