Z-Index Trick You Might Not Know 🚀

In one of the projects where I recently worked, we had a pretty trivial task: Add a panel of buttons for our canvas editor. The design in Figma for this panel looked like this:

But what about our second requirement? We already can't draw in space between buttons. Even if we make our wrapper totally transparent, the click will be caught by this panel, and the canvas will not see it.

Ideally, we need to have something like this:

:

When the z-index property is not specified on any element, elements are stacked in the following order (from bottom to top):

• The background and borders of the root element.


• Descendant non-positioned elements, in order of appearance in the HTML.


• Descendant positioned elements, in order of appearance in the HTML.

So, because our panel is already a positioned element, it will be on the top of our canvas. If we set position: absolute to the canvas, then the canvas will be on the top because it appears after the panel element in HTML.

But what if we set z-index: 1 to our buttons? Logically, it seems that they should start counting their index from their parent (panel) and still be under the canvas, but they will be on top of the canvas!!!, and our initial task is done.

You can check it here in this

The more detailed information about ordering and stacking context, read in CSS spec

Conclusion 🚀

In conclusion, understanding the intricacies of z-index and how it interacts with the positioning of elements can lead to clever solutions, as demonstrated in my example. Remember that an element with position: absolute without z-index doesn't create a stacking context.