CSS rules for organizing the stacking order of elements in the SuperFish Menu with

I've been struggling with a z-index issue on a website I'm currently managing. It seems to stem from the z-index values in the SuperFish Menu and a specific div element. Despite my attempts to apply position:relative/absolute & z-index: 99999 declarations in various places, the menu continues to remain stuck behind the third panel on the right side of the page.

If you want to see this problem for yourself, try hovering over the Practice Areas tab followed by Real Estate. You'll notice that the sub-menu remains hidden behind the panel.

Trying to solve this issue is really getting on my nerves.

The website's link is: http://174.120.240.5/~rushmars/

csswordpressz-indexsuperfish

Answer №1

There seems to be an abundance of positioned elements in your layout. Let's visualize the structure as a tree for better understanding.

  • body - position: relative
    • #main
      • header - position: relative; z-index: 99
      • .primary_content_tail - 
        position: relative; z-index: 9300
    • footer

According to MDN,

A stacking context is formed, anywhere in the document, by any element which is [...] positioned (absolutely or relatively) with a z-index value other than "auto"

This means that we have two stacking contexts, causing the menu in the header to always remain behind the content. To address this, try setting z-index values to auto (inline). The updated structure will be:

  • body - position: relative
    • #main
      • header - 
        position: relative; z-index: auto
      • .primary_content_tail - 
        position: relative; z-index: auto
    • footer

After making these adjustments, the layout should function correctly in Chrome Canary and Firefox Aurora. If you still require specific z-index values, consider creating a new layer (stacking context) for the menu.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be the reason my span is not altering color as I scroll?

Important HTML Knowledge <section class="home" id="home"> <div class="max-width"> <div class="home-content"> <div class="text-1">Hey t ...

javascripthtmlcss

The Link Breaks the Overlay Hover Effect

Currently, the code functions as intended when you hover over or touch the thumbnail, an overlay will appear. The issue lies in the fact that to navigate to a specific URL, you have to click directly on the text. The overlay itself is not clickable and ca ...

javascripthtmlcsswordpress

The background image is failing to display, although other styles for the class or element are visible

Why won't the background image display, even though I have verified that the image path is correct and changing other properties like color or background color works just fine? Here is my CSS code snippet: .container { background-imag ...

htmlcssbackground-image

Web page saving fails to preserve images!

Currently working on a PHP-based website that is utilizing the Zend framework and hosted on an Apache server. The folder structure within my www directory looks like this: +www | |_+css | | | |_images | |_js | |_images The issue I'm ...

phpcssimagezend-frameworkdownload

Creating two columns with separate scrollbars in Responsive Bootstrap is a useful feature for organizing content in a visually

Is there a way to create 2 columns with scrollbars using Bootstrap when a button is clicked? Here's what I'm trying to achieve: My webpage consists of a row-fluid div that contains the main-column div with main-content and extra-content. There&a ...

jquerycsstwitter-bootstrapresponsive-designsass

Is it possible to turn off wrapping behavior within a div using CSS3 or Bootstrap?

Currently, I am working with code that utilizes Bootstrap 2. <div class="row-fluid"> <div class="span4">Some text 1</div> <div class="span4">Some text 2</div> <div class="span4 ...

htmlcsstwitter-bootstrap

Selenium can locate an element by its CSS selector that comes after a specific element

How can I locate the text "Interesting" which is the first occurrence of the class b after h1.important when using Selenium? <div class="a"> <div class="b">Not interesting</div> </div> <div class="title"> <h1 c ...

pythoncssseleniumxpathcss-selectors

Setting the maximum width for a JavaScript pop-up box

Below is the html code that creates a link reading "sacola de compras" <div> <script type="text/javascript" src="https://app.ecwid.com/script.js?4549118"></script> <script type="text/javascript"> xMinicart("style=","layout=Mini") ...

javascriptjqueryhtmlioscss

Issue with background image resizing when touched on mobile Chrome due to background-size property set to cover

My current challenge involves setting a background image for a mobile page using a new image specifically designed for mobile devices. The image is set with the property background-size: cover, and it works perfectly on all platforms except for mobile Chro ...

javascriptjqueryhtmlcssjquery-mobile

NextJS application failing to display SVG icon in the absence of internet connection

https://i.stack.imgur.com/M9reE.jpg https://i.stack.imgur.com/Yyg4g.jpg Upon inspection of the provided images, it is evident that the src URL points to a location within the nextjs public folder. The issue arises when there is no internet connection - i ...

javascripthtmlcssreactjsnext.js

Troubleshooting Problem with CSS Gradient Text

I'm attempting to recreate the text effect found here: . However, I'm facing issues getting it to work despite using the same code. This is the HTML I am using: <h1><span></span>Sign Up</h1> My CSS looks like this: h1 { ...

cssgradient

Having trouble updating the icon on my website using FontAwsome

Just a heads up - I'm not familiar with HTML/CSS/JS. This template is pre-made, and I'm simply making some adjustments to it. Hello, I'm currently working on my portfolio website and I want to display my projects based on the programming la ...

javascripthtmlcssfont-awesome

Ensure the table row remains on one page when printing or viewing the print preview

I'm currently dealing with an html report that contains a table, which can be seen here http://jsfiddle.net/fhwoo3rg/2/embedded/result/ The issue arises when trying to print the report, as it breaks in the middle of a table row like this: I've ...

htmlcsshtml-table

The horizontal layout for the Bootstrap 3 sub menu is not displaying beneath the dropdown as expected

Check out my testing site here. I envision the navigation of my website to look like this in the near future, albeit at a lower resolution. While experimenting with the inspector tool, I noticed that changing the display property to inline-block causes t ...

csswordpresstwitter-bootstraptwitter-bootstrap-3submenu

Adjust the width of the dropdown menu in Twitter Bootstrap's typeahead feature depending on the search

Not entirely certain if this issue is related to jQuery, but there's a strong suspicion that it might be. The problem at hand can best be described by the picture provided: The query output exceeds the width and doesn't resize or scale according ...

csstwitter-bootstrap

The fuse-sidebar elements are not being properly highlighted by Introjs

I have recently developed an angular project that utilizes the fuse-sidebar component. Additionally, I am incorporating introjs into the project. While introjs is functioning properly, it does not highlight elements contained within the fuse-sidebar. The ...

javascriptcssangularintro.js

Manage the size of the menu element within Material-UI

I'm currently working on incorporating a menu item with a login form inside it. The functionality is there, but the width of the form is way too small. I've been searching through the documentation for a solution, but haven't come across any ...

cssreactjsmaterial-ui

Mastering the art of gracefully transitioning to a fallback option when CSS grid

When it comes to creating a simple grid of squares (3x3 at most, filling in top to bottom left to right), I have encountered challenges with both flexbox and grid. The DOM structure required for each method seems incompatible or too complex to support both ...

htmlcssflexboxcss-grid

Interactive SVG viewport dimension

Check out my "hamburger button" made in SVG, shown below. body { margin: 0; text-align: center; } svg#ham-btn { margin: 2rem; border: 1px solid black; fill: #383838; } <svg id="ham-btn" width="107.5px" height="80px" viewBox="0 0 80 80" pre ...

htmlcsssvg

Enhance User Experience by Implementing Event Listeners for Changing Link Visibility Using mouseover and getElementsBy

I am new to JavaScript and struggling to find a solution. Despite searching online for fixes, none of the solutions I've found seem to work for me. I have spent hours troubleshooting the issue but I must be missing something crucial. Can someone plea ...

javascripthtmlcssaddeventlistenergetelementsbyclassname