cloud layers

Placing One Element Over Another Using Elementor and Z-Index

There are numerous reasons why you might wish to display overlapping elements. Elementor makes this easy by allowing you to set the z-index of each element.

z-index is a CSS property that sets the stack order of specific elements. An element with greater stack order is always in front of another element with lower stack order. - Wikipedia

Z-index is very easy to implement with Elementor, however, the concept itself can get tricky in complex scenarios. If you'd like to learn more about z-index, you can scramble your brain here. In the meantime, we'll deal with the normal scenario. 

In this quick tutorial, you'll see how easy it i to place one image on top of another, even though the natural order would be just the opposite.

Click any image below to enlarge

  1. Add two elements to your column. In this case, I'll use two images. But theoretically, this could be any number of elements that you want to place over one another. You could even have more than two, using higher and higher z-indexes for each layer. But for this demo, we'll just use two image elements.

  2. I want the first element to overlap the second, so I'll first need to move the shooting stars image up and to the right. I can easily accomplish this by adjusting the top and left margins of the shooting stars image. I'll set the top margin to a negative number to move it up, and the left margin to a positive number to move the image to the right.
  3. The natural order places the shooting stars image above the hands image, but I want that reversed. Simply edit the hands image, go to the Advanced tab, and change the z-index to a larger number. In this case, I used a z-index of 10. Because the hands image's z-index is now a larger number, it is above the shooting stars image.

  4. I could stop there and have accomplished the original goal. But just for fun, I wanted to adjust the opacity of the hands image, to allow the shooting stars image to show through. You'll find the opacity option in the Style tab.
step 1
STEP ONE - ADD THE ELEMENTS
STEP TWO - SET MARGINS TO MOVE ONE ELEMENT
step 3
STEP THREE - CHANGE ELEMENT'S Z-INDEX
step 4
STEP FOUR - ADJUST OPACITY, IF DESIRED

The Final Result - Live

Twice the magic
shooting stars

Share With Friends

4 thoughts on “Placing One Element Over Another Using Elementor and Z-Index

Leave a Comment