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.
I use Elementor in WordPress, if anybody knows it well, please message me. The z index isn't working in my call to action widgets, which also have horizontal scrolling affects. 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.
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.
- 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.
- 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.
- 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.
- 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.
This question will probably go down in history as one of the most asked questions ever along side “Which theme is best for Elementor?” but that is for another time. Todays focus will be on transparent headers and the 2 methods I use constantly to make mine with Elementor.
Required Tools:Elementor Pro
Before we get too far ahead I am going to assume that if you are reading this you are a Elementor Pro user and are some what familiar with making headers & footers with Elementor. If not a recommend you take some time to check out the docs provided by Elementor.
Using Z Index Elementor
So with that out of the way let’s begin.
Setting Things Up
To ensure we all get the same outcome I am going to share with you the templates I will be using so that by the time we are finish the outcomes will be the same.
For my page template I will be using this.
For my header I will just create something very basic that consists of just a 2 column section with a nav widget on the right and image widget on the left.
This is what your page should look like now with the template and basic header.
Transparent Header Method 1
For this first method we are going to be using a couple lines of code to assist our header.
Open up your Header with Elementor and adjust these section options.
Now for the CSS
The css we will be using will take the header out if its normal flow and allow the content to slide under.
Apply the css under the advanced tab in the custom css area. Things might look normal except the drag widget area has moved up a little.
Method 1 Result
This method can be problematic when editing other pages with Elementor because the header will overlap the first section and will require that you use the navigator to select the top most widgets.
This method is consistent no matter the size of the header and no measuring is required.
This is my preferred way of handling transparent headers.
Transparent Header Method 2
Method 2 is probably the most simplest way to handle a transparent header.
Its involves adjusting the bottom margin of that header so that the content goes under it.
Let’s Begin
Revert back to your original header if you started with method 1.
Next we need to figure out how much negative margin we need to add to our header.
I accomplish this by measuring the height of the header using shift+command+4 which allows me to get a close estimate of the height for a more accurate estimate you could use google dev tools.
My measurement came out to be 100px.
This method can give you the same look as the first if your math and measuring is good.
If not you could see some random whitespace from not applying enough negative margin either on tablet or mobile.
I hope this answered alot of your questions in a future article we will tackle transparent header that change color once they become sticky.
Stay tuned.
😀.
Z Index Elementor
Recent Posts
Css Default Z Index
Recent Comments
- on Vertical Scroll Snapping In Elementor with CSS
- on How To Hide Your Header Till User Scrolls Down
- on How To Make A Fixed Vertical Header
- on Vertical Scroll Snapping In Elementor with CSS
- on How To Make A Fixed Vertical Header