The ‘<div class="relative z-30 …’ div has been added in with a z-index of 30. I need to be able to set that to 40 to prevent my drop-down menus in the Navigation Bar being masked by the following components.
How can I set the z-index to be 40 on a div I can’t access in Elements?
If I modify the generated source code, I can get my Navigation Bar to work correctly.
As an additional question (or maybe feedback) is there a way to see the z-index settings for all the components at the same time. If not, it would be useful to be able to optionally see them listed besides the Components in the page Layout panel.
The Container component is a bit unique due to the number of features it supports. It includes a couple of internal
layers to manage its layout and layering system.
For example, if you check the Transforms settings on a Container, you’ll see you can apply transforms to either:
The entire component
Just the background
Or only the content
This layered structure allows for more advanced effects — like blurred backgrounds behind text — and helps ensure everything works reliably across different setups. To support this, the Container also needs to manage its own z-index stack internally.
It’s using Tailwind’s standard z-index utility classes, which step in increments of 10 (z-0, z-10, z-20, z-30, etc.).
This particular internal layer is set to z-30 to ensure it sits at the correct visual depth relative to other components. I don’t recall the exact reason we landed on z-30 specifically — but there was logic behind the choice
You can’t directly adjust the z-index of internal container layers within Elements. That said, if you’re comfortable with JavaScript, you could target the element in the browser and apply a style override using a couple of lines of javascript.
Keep in mind: even if the z-index was set to z-40, what happens if another component sets z-[41]? It’s a relative stacking game, and bumping z-index alone doesn’t always fully solve the issue — especially if nesting is involved.
Also, as a general note: when you place a component inside a Container (or any component), it inherits that component’s stacking context — which can affect how elements appear layered on the page. This flexibility is one of the powerful aspects of Elements, but it can lead to nuanced edge cases like this.
This is the javascript code (courtesy of ChatGPT) I used to achieve this (in case anyone else has the same question):
const menuContainer = document.getElementById('menuContainer');
if (menuContainer) {
const targetDiv = menuContainer.querySelector('div.relative.z-30.flex');
if (targetDiv) {
targetDiv.style.zIndex = '40';
}
}
.
ChatGPT Explanation:
Explanation:
• document.getElementById('menuContainer') safely grabs the parent container.
• querySelector('div.relative.z-30.flex') looks for the target child div with the known combination of classes. You can include more class selectors if needed for precision.
• We then directly change the style.zIndex property to "40".
Yes, that is true but the power of Elements is that is very customisable which means it is normally possible to find a way to achieve what you want, especially with the support users get from The RM Development Team.
