DEV Community

CSS Z-Index Guides

Z-index is all about discipline and having a plan — easier said than done!

This is a collection of top and trending guides written by the community on subjects related to CSS Z-Index concepts. For all things CSS, check out the CSS tag! Please contribute more posts like this to help your fellow developer in need.

Why your z-index isn't working

I was building a sidebar recently, and I encountered a bug where the content of the page was always on top of the mobile navbar no matter how high I raised the z-index of the sidebar. This took me a while to figure out and I'm writing this article hoping that someone out there won't waste a lot of time like I did trying to solve the bug.

👨🏻‍💻 How to solve the Z-index issue Within 1 minute😲😲

Z-Index is an important property of CSS. The z-index property specifies the stack order of an element and its descendants. We use Z-index with absolute or relative positions. When elements overlap, z-order determines which one covers the other.

Is using z-index in your CSS bad practice?

When was the last time you see the z-index CSS property being used like so:

CSS z-index illustrated

My followers know that I no longer work as a frontend developer, however, I worked as one for nearly 15 years and I was self-taught. I was lucky to have a background in architecture, CAD and graphic and 3d design, so grasping the more mathematical (or in this case geometrical) aspects of putting together a layout, was not difficult for me. However, I see that for self-taught developers coming from completely unrelated backgrounds, the z-index is a tough one to grasp.

The unsolvable z-index auto-increment.

But the CSS counter() function returns a <string> and the z-index property is looking for an <integer>, so well.. It doesn't work.

Why z-index doesn't work all the time 🤯 ?

If you have struggled with z-index you are not alone.

Guía completa y práctica sobre posicionamiento CSS: z-index y stacking context

Cuando los elementos se colocan fuera del flujo normal, pueden superponerse sobre otros elementos. La propiedad z-index especifica el orden de apilamiento (Stacking Context) en el eje z, es decir, cual elemento debe ser colocado enfrente o detrás de otros.

CSS Z index and stacking order

This is kind of an advanced property in CSS and all you need to think about here is layers (as in photoshop) and them z index will be a piece of cake for you. All it is do you want a layer or element (let's say Image) to be overlapped or on top.

[CSS design] I think about specifying z-index difficult to break

Defines the z-index value to be specified for each component.

Happy CSS Z-Index coding!