

After reading this article, you’ll be able to understand and avoid those common z-index pitfalls! Check out the video version of this roadmap on my YouTube channel, Coder Coder. We’ll be going through some actual code examples and problem-solving them. This article will explain in detail four of the most common reasons that z-index isn’t working for you, and exactly how you can fix it. And you can’t always fix things by setting the z-index to 999999! ?


But there are some additional rules that make things more complicated. It seems simple at first- a higher z-index number means the element will be on top of elements with lower z-index numbers. Unfortunately, z-index is one of those properties that doesn’t always behave in an intuitive way. It’s super useful, and honestly a very important tool to know how to use in CSS. Z-index is a CSS property that allows you to position elements in layers on top of one another.
