Placing One Element Over Another Using Elementor and Z-Index

cloud layers

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.


  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 3
step 4

The Final Result - Live

Twice the magic
shooting stars

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

    1. You may have to create a separate section for mobile, and then using media queries, hide the mobile section for desktop and tablet screens and hide the desktop section for mobile screens.

  1. I know you’re not here for tech support, but I can’t seem to figure this out. I want my header to have a base image on Z-1, then a frame on Z-2 with the top-left corners aligned. Everything looks fine when I design it, but as soon as I resize the screen, everything jumps around – the frame is now above or below the image. I’ve made sure both images are exactly the same size, and all the image properties are identical (except for the top margin, of course). I’ve tried it with the images in the same section/column and with them in separate sections. Neither way seems to make a difference. Is what I’m trying to do even possible??

  2. Thanks Donna – I just signed up for the FB group, awaiting approval.

    As a reference, here’s a sample of what I’m trying to do:


    The red background layer is Z1 and the frame is Z3. Both images are in the same column. As you resize the browser window, the background stays in place, but the frame moves up and down – size the window small enough and the frame is pushed right off the top of the window.

    No need to reply (unless you really, really want to! :), Thanks for pointing me to the FB group, I’ll post my question there.

Leave a Reply

Your email address will not be published. Required fields are marked *