How To Use Z-Index In The Elementor Builder

Published: 3 months ago

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 Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

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

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.

Author

  • James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!

A relationship driven website creation company.

Connect

© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram