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

The modal popup will appear in the center of the screen when the scrollbar is positioned at the top

I have a modal popup that is not consistently displayed in the center of the screen, regardless of the scrollbar position. I always want it to render at the center so the user doesn't need to scroll to see it. Below is the code I am currently using: ...

javascriptphpjqueryhtmlcss

Is there a way to transfer multiple functions using a single context?

Having created individual contexts for my functions, I now seek to optimize them by consolidating all functions into a single context provider. The three functions that handle cart options are: handleAddProduct handleRemoveProduct handleC ...

javascriptjavahtmlcssreactjs

Is it possible to assign a Bootstrap class as a variable in a custom CSS declaration?

While trying to make my website responsive, I planned on using media queries to adjust text size and other elements. The issue arises because I rely on bootstrap for setting text sizes. Is there a way to apply bootstrap classes in my CSS file? For instanc ...

cssbootstrap-5

Determine the dynamic height of content in a TypeScript file

Could you please provide guidance on obtaining the height of the content within this particular div element? For example, I need to calculate the dynamic height of the content. code .html <div class="margin-top-47 margin-horizontal-10" #hel ...

htmlcssangulartypescriptionic-framework

Using a color as a substitute for a background image on mobile devices

Is there a way to create a fallback in my CSS for changing the background image to a color when viewed on a mobile browser once the pixels reach the max-width? In the snippet below, the media query "only screen and (max-width: 600px)" works if the top bod ...

htmlcss

Tips on how to change an image tag into a CSS selector

I need to change this tag to a WebElemet using CSS Selector instead of Xpath. I attempted with Xpath as shown below: panelSectionTitle.find( By.cssSelector( "img.aw-layout-right[style='']" ) ) <img style="" class="aw-layout-right" height="2 ...

htmlcssselenium-webdriver

Words placed in the middle of the picture

<div> <img style="vertical-align:middle" src="https://placehold.it/60x60"> <span style="">New Product</span> </div> I require this specific layout to be responsive. Could you please provide instructions on achieving this? ...

htmlcssimagesass

Ensuring that your content expands to fit the sidebar dimensions

I have diligently searched for a solution to my issue both on Google and here, but have yet to find one that works. I've experimented with various CSS properties like display: table-cell and inline-block, as well as different overflow options, but not ...

css

Security Error when using the JavaScript map function in FireFox

My current dilemma involves using a JavaScript code to extract the above-the-fold CSS from my websites. Surprisingly, it functions flawlessly on Google Chrome. However, when I attempt to execute it on Firefox, an infamous 'SecurityError' occurs: ...

javascriptcsssecurityfirefox

"Enhance your website with a backspace button using jquery - here's

Recently, I delved into the world of jQuery and decided to test my skills by creating a jQuery calculator. Everything worked perfectly except for the backspace button. This is what I tried: if (value === backspace) { $(input).val($(input).val().substring ...

javascriptjqueryhtmlcss

Position the button at the bottom of the card using Bootstrap

While exploring a Bootstrap example utilizing the card-deck and card classes (Pricing example), I pondered over how to align buttons correctly when one list has fewer items than others. https://i.sstatic.net/IGN7K.png I aim to vertically align all button ...

htmlcsstwitter-bootstrapbootstrap-4

Steps for accessing the `<img>` tag within an `<a>` tag to focus on the `<img>` element in Internet Explorer

How can I target the img tag inside an href tag to set focus on the <img> element? For example: <a href="#"><img class="img1" src="abc.png"/></a> The CSS selector a .img1:focus {} does not seem to work. I am unable to access the ...

cssimagehref

Guide to utilizing Bootstrap v4 SCSS edition in a Bower project

Recently, I have been using the SASS/SCSS version of Bootstrap #3.3.6 but I just found out that they released version 4. While there is a lot of information on how to use Bootstrap v4 (non SCSS) in projects, I'm having trouble finding resources on ho ...

csstwitter-bootstrapsassbower

What is the method for enclosing the Font Awesome addition symbol within a bordered box to create the appearance of a button?

Here is a sample HTML code: <div id="menu-icon"> <div><i class="fa fa-plus fa-lg"></i></div> </div> And this is the corresponding CSS: #menu-icon { height: 45px; width: 45px; background-color: #A3D8D4; ...

htmlcss

When utilizing customize-cra to modify antd less variables, it results in the generation of numerous redundant CSS files during the build

While utilizing customize-cra to override antd less variable, I have encountered an issue where it generates multiple duplicate CSS files during the build process. According to the documentation provided by antd, if I opt for the default import of CSS by ...

cssreactjssassantd

Implementing CSS Transform for Internet Explorer

Hello, is there a way to make this function in IE ?? I have been looking into IE transformations but it appears that they are not supported.. Is there an alternative method or something else? It works in other browsers like Firefox, Chrome, and Opera. I s ...

htmlinternet-explorercss

How can you hide specific elements in HTML/CSS based on window size without relying on media queries?

How can I create an HTML/CSS toolbar where specific elements disappear completely when the browser size is decreased, similar to how the favorites bar functions in most browsers? The toolbar should be able to display a varying number of items. In this cas ...

htmlcssfrontend

Creating a custom Docker image using the official Wordpress image as a base

Currently, I am in the process of constructing my own customized image using an image from Docker Hub. My goal is to incorporate additional files into the existing file system of the image. To achieve this, I have created a Dockerfile with the following co ...

phpwordpressdockervolumes

The internal style and script specified within the <head> section are not being rendered

Within my Joomla website using the T3 template, I inserted the following "Custom Code" just before the closing </head> tag: <style type="text/stylesheet"> div.t3-sidebar.t3-sidebar-right{ background: #F8F8F8 none repeat scroll 0% 0%; ...

javascriptcssjoomla3.0

Python Selenium cannot locate button within an iframe

click here for imageI am trying to interact with the "바카라 멀티플레이" button located at the center of the website. Even after switching into an iframe, I am unable to detect the button. How can I achieve this? from selenium import webdriver im ...

pythoncssseleniumxpathiframe