How To Use Z-Index In The Elementor Builder

Authored By: James LePage
Published On: November 14, 2020

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

amazon elementor E book

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.

Z-Index Example
Photoshop Layers

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:

Join our list

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Thank you for subscribing.

Something went wrong.

Notify of
Inline Feedbacks
View all comments
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!

Social Share

Crafting Stunning Digital Appearances & Assets Out Of New York.
Get In Touch
Syracuse, NY | Charlotte, NC | New York, NY
© 2020 Isotropic, LLC
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram