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

Donna F. Cavalier is a woman of many interests, both online and off. A WordPress enthusiast since 2004, she fell in love with both GeneratePress theme and Elementor page builder. Together, they help create stunning WordPress websites. Hence, this site was born. She also has many other WordPress and web design related sites, such as WPLot.us (a WordPress maintenance service), CavalierWebDesign.com, DonnaFontenot.com, and others. She is also an author, with one novel, The Grave Blogger, and 2 children’s books Petal Pals: Swamp Adventure and Petal Pals: Off to Amarillo published, with others to be published soon. Finally, she is also a Southeast Louisiana Wedding Officiant, owner of Happy Life Weddings.

Share With Friends

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

Leave a Comment