Z-Index and Stacking Context in Elementor: Why an Element Remains Beneath a Section

What Are Z-Index and Stacking Context?

The z-index property determines the order in which elements are placed along the Z axis—in other words, which element appears closer to the user. However, z-index does not compare every element on the page in one global list. The browser first works with stacking contexts, and only then determines the order of child elements within each context.

For example, a dropdown may have z-index: 9999, but its parent container may belong to a layer with a lower priority than a neighboring section. In this situation, the dropdown cannot jump over the parent stacking context, even if its own z-index is extremely large.

Stacking contexts can be created by positioned elements with their own z-index, transform, opacity values below 1, filter, isolation, certain contain values, and will-change. As a result, the problem is often hidden at the container level rather than in the menu or header itself.

• z-index works correctly only within the stacking context to which the element belongs.
• A large number does not remove the limitations of a parent stacking context.
• Transforms and filters used without a clear need can change the layer order.
• overflow: hidden usually does not create a stacking context by itself, but it can clip a dropdown or another child element.

Why Z-Index May Not Work in Elementor

In Elementor, elements are usually nested inside one another: a widget is placed inside a column or container, the container is placed inside a section, and the section may be part of a page template. Because of this, the stacking order is formed by the entire chain of parent elements.

A typical situation is that a header has position: sticky and z-index: 100, but one of its parents has a transform or an unsuitable overflow value. In another case, a neighboring section has its own z-index: 200 and appears above the header at the level of the parent containers.

Another common cause is that z-index was assigned to the wrong element. For example, the value may be applied to the menu widget even though the entire header container is responsible for the overlap. In this setup, you need to inspect and raise the container involved in the layer comparison.

• The header does not have position: relative or sticky.
• z-index is assigned to a child widget instead of the required parent container.
• The neighboring section has a higher z-index.
• A parent container has transform, filter, opacity, or another property that creates a stacking context.
• The dropdown is clipped by overflow: hidden.
• Sticky behavior is disrupted by a parent container with an unsuitable height or scrolling behavior.

How to Check the Problem Using Browser Developer Tools

The quickest way to diagnose the issue is through DevTools in Chrome, Edge, or Firefox. Open the page, right-click the header or dropdown, and select the option to inspect the element. In the Styles or Computed tab, check the actual values for position, z-index, overflow, transform, filter, and opacity.

Do not inspect only the selected element. Move up through the DOM tree from the dropdown to the header, container, section, and page wrapper. At each level, look for properties that create a separate context or clip the content.

If the browser shows that the dropdown has a high z-index but its entire parent container is positioned beneath another section, increasing the number will not solve the problem. You need to change the order at the level of the parent containers or remove the unnecessary stacking context.

• Check which element is actually covering the header or menu.
• Compare the header's z-index with the z-index of the neighboring section.
• Check whether a parent has transform, filter, or opacity.
• Inspect computed values rather than relying only on the CSS shown in the editor.
• Temporarily disable a suspicious property in DevTools and see whether the behavior changes.

Basic Sticky Header Configuration

A simple sticky header usually requires position: sticky, a top coordinate, and z-index. You can add the CSS to the required element or container using the Custom CSS mechanism if it is available in your Elementor configuration. The selector in the example represents the current element to which the code is applied.

Increase z-index based on a clear hierarchy rather than choosing values at random. For example, you can assign 100 to the header while leaving ordinary sections at auto or using a lower value. If the project already has a layer system, it is better to follow it to avoid conflicts.

• Apply position: sticky to the header or its main container.
• Set top: 0 if the header should stick to the top edge of the viewport.
• Set z-index on the element that must appear above neighboring sections.
• Make sure the sticky element has enough parent-container height for scrolling.

selector {
  position: sticky;
  top: 0;
  z-index: 100;
}

How to Fix Stacking Context and Dropdown Clipping

If the basic CSS does not help, inspect the parent containers. Remove transform or filter if they are not needed for animation or design purposes. Also use opacity carefully: even a value such as 0.99 creates a separate stacking context.

Overflow is especially important for dropdowns. If the header container or one of its ancestors has overflow: hidden, the menu may be physically clipped by the container's boundaries. In this situation, z-index will not help because it changes the layer order but does not allow content to extend beyond the clipping area.

After changing the styles, test the menu on desktop and mobile devices. Elementor's responsive settings can create separate z-index, overflow, or positioning values for different screen sizes.

• Change overflow: hidden to visible if the container should not clip the dropdown.
• Do not leave transform on a parent element without a clear need.
• Check filter, opacity, isolation, and will-change.
• Compare the styles for desktop, tablet, and mobile.
• Clear the site and browser caches after changing CSS if the old version of the styles continues to appear.

/* Example: use only if the container should not clip its content */
selector {
  overflow: visible;
}

A Practical Troubleshooting Process

To avoid changing dozens of random values, troubleshoot the issue systematically. First, identify exactly what is covering the header or dropdown. Then compare the parent containers of both elements and find the level at which their stacking order diverges.

If disabling transform, filter, or overflow makes the problem disappear, restore the properties one at a time. This allows you to identify the exact cause without breaking other parts of the design. After fixing the issue, test menu opening, page scrolling, mobile navigation, and the layering of modal windows.

• 1. Identify the element that should appear above the others.
• 2. Add or check its position and z-index.
• 3. Check the z-index values of neighboring sections and containers.
• 4. Follow the entire chain of parent elements.
• 5. Temporarily disable transform, filter, opacity, and overflow.
• 6. Check the result at different screen widths.
• 7. Keep only the rules you need instead of using a collection of excessively large z-index values.

Common Mistakes When Configuring Z-Index

The most common mistake is treating z-index as a universal number that automatically moves an element above the entire page. In reality, both the values at the parent level and the stacking-context order are important.

You should also avoid adding z-index to every container without a clear reason. An excessive number of contexts makes maintenance more difficult and can create new conflicts between the header, popup, cookie banner, and modal windows. It is better to define a logical layer hierarchy and apply it selectively.

If changes are not immediately visible, the cause may not be CSS but cached styles, CSS optimization, or a separate template for the mobile version. At the same time, do not modify theme code immediately: first check the actual styles in DevTools and the settings of the specific container.

• Do not rely on z-index: 999999 without checking the parents.
• Do not confuse a layering problem with an overflow problem.
• Do not use position: fixed instead of sticky merely as a temporary workaround.
• Do not forget about separate styles for responsive modes.
• Do not edit minified CSS or plugin files without a backup and an understanding of the consequences.