In Elementor, overlapping elements can give them a distinctive, expert, and fashionable appearance. Additionally, it enables you to cram more information into a compact space without having it appear sterile or uninteresting.

The good news is that using Elementor makes it as simple as it gets to overlap images, text, and other elements. We'll show you how to create an overlapping section in Elementor in today's tutorial.

Make Overlapping Elementor Sections

Go to pages on your dashboard and launch any page using Elementor. Then select Edit With Elementor.

Set Page Layout to Elementor Canvas under Page Settings once your page has loaded. then press the plus sign (+) to add a new section with a single column.

In your new section, add a widget; click on the widget’s icon and in the search, type divider to get the divider widget, drag it to your section.

Set Height to Min Height of 400 pixels in the Edit Section window on the right after selecting the section. Give it a backdrop color next under Style (my choice is red). Give the divider a white background under Style after choosing the divider.

Now select the section and duplicate it.

Now style the clone section separately than the previous one nad give it a different background color.

The next step is to overlap your two parts once you have them.

I'll start by demonstrating how to stack the blue and red sections.

You will require the Elementor Navigator for this. The navigation symbol is on the left, near the bottom of your Edit Section.

Your navigator appears when you click on the navigation icon. You may quickly access your sections with the navigator, which also aids in navigating through them. Additionally, a portion is concealed when you click the "eye" next to it.

Select the blue section, choose Advanced from the Edit Section menu on the left, then under Margins, give it a Top margin of -100 pixels. This will bring the blue section into (on top of) the first section.

Pick the red portion, choose Advanced, select Z-index, and adjust it to 10 to have the red section appear above the blue section instead. As a result, the red section is automatically positioned over the blue section.

Initially, the blue part is larger than the red because it is given priority. If the blue portion has a Z-index of 1, it is on top if the red section has a Z-index of 0. In essence, the part with the higher Z-index automatically slides above the lower one.

Let's imagine you have more sections than just two.

You must make another section in order to see how this functions.

Choose the blue section and duplicate it. Then choose the cloned section and set its Z-index and Margins to 0 pixels under Advanced. You can change the color of it under Style.

For instance, you would need to give the blue part a Z-index that is higher than both the red and the green portions if you wanted it to be on top of both sections.

For instance, the green area and the red section both have a Z-index of 1. (the default). Decide to give the blue section a Z-index of 3 and then choose it.

Select the green portion and give it a Margin of -20 under Advanced so that it can move into the top section to clearly see this modification. The blue section is then visible as being above both areas.

Even in responsive settings, this overlapping effect functions. For instance, you can select the mobile device from the Responsive Mode menu and decide to increase the Z-index of whatever part you want to see first.

Wrapping Up

In Elementor, you may do that to overlap areas, and the overlap will even function on different devices.

Use the section below for any comments or queries. Also, spread the word to your acquaintances and continue to follow CodeWatchers.