In this guide, we wanted to discuss what Z-index is in the Elementor Builder and how you can use it to make better websites.

If you've ever been editing an element in the Elementor builder, you may have stumbled across the Z index input in the advanced settings tab. If you're not familiar with CSS, you probably don't know what this is.

It's an incredibly useful, helpful, and simple utility that comes standard in all CSS. If you don't know about Z index, you'll be happy read this article.

What’s Z-Index?

Mozilla defines Z-Index as “[a CSS property] sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.”

If you've ever used Photoshop, it is exactly like the layers feature. An element in a lower layer will be overlapped by an element in a higher layer.

How Do I Use It In Elementor?

You can use Z index in Elementor by navigating to the advanced settings panel of any element and entering a value for the Z index. It's quite simple!

just be sure to keep in mind that if you're going to be using many layers, it's important to keep track of each Z index. You can create fairly complex overlapping sections, as will discuss in the next section, but it makes it much easier if you understand which Z index value is assigned to which element.

What Can I Do With Z-Index and Elementor?

Things can get quite pretty when overlapping. Sections can quickly run into eachother. Negative margins can drag columns over sections. You can set a corner of an image to overlap another image. Here's an interactive example of the power of Z index - you can definitely do something like this in Elementor: