isotropic-2022
Share
Blog
Search
Menu

How To Use Z-Index In The Elementor Builder

By James LePage
 on November 14, 2020
Last modified on January 7th, 2022

How To Use Z-Index In The Elementor Builder

By James LePage
 on November 14, 2020
Last modified on January 7th, 2022

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:

codewp-ai-og-new
Meet CodeWP, an AI Code Generator
Prompt CodeWP in plain English and it'll output high quality code, specific for WordPress.
isogroup-cover
Join The IsoGroup
A vibrant Facebook Group to talk about web design and the business of agency. Daily curated resources and conversations.
Join Now
bricks-builder-course
Bricks Builder Course - Coming Soon
The Bricks Builder Mastery course will bring you up to speed on this popular builder.
Get Launch Notification & Discount
Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram