This content originally appeared on DEV Community and was authored by Rails Designer
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>
The Z-index content will scroll “on top” of the nav element.
See the 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>
This is using Tailwind CSS, but all you need to know is that the isolate class is the same as isolation: isolate;.
See the 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.
This content originally appeared on DEV Community and was authored by Rails Designer
Rails Designer | Sciencx (2024-09-17T09:10:45+00:00) Fix Any CSS Z-index Issue With This One Trick. Retrieved from https://www.scien.cx/2024/09/17/fix-any-css-z-index-issue-with-this-one-trick/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.