Member Avatar for bwallace

I know other people have this problem, but the search results I see mention flash and Internet Explorer, neither of which I'm using right now. Why do the submenus appear behind the main page content as they do here

and here

?

Here's the CSS for those two divs:

#div2 {
background-color: #FFFFFF;
width: 100%; 
height: 1350px;
padding: 10;
margin-left: auto;
margin-right: auto;
}

#div2-left { /* where the menu is */
background-color: #FFFFFF;
width: 20%;
height: 95%;
float: left;
}

#div2-right { /* where the main page content is */
background-color: #FFFFFF;
width: 70%;
height: 92.5%;
padding: 5 50 0 0;
float: right;
}

I tried adding "position:absolute; z-index:2" for div2-left but all it does it make the div wider. When I put z-index for div2-right it moves to the left side of div2 and covers div2-left. Please help.

Edited by bwallace because: n/a
  • 2 Contributors
  • 3 Replies
  • 105 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by shaya4207

Dani AI

Generated

This is a classic stacking-context / z-index issue — was right that the fix belongs on the submenu element itself. Two practical rules to remember: z-index only has an effect on elements that are positioned (position: relative/absolute/fixed/sticky), and z-index values are evaluated inside the element’s stacking context (ancestors can create their own stacking contexts and block a higher z-index).

A simple, reliable pattern is to make the list item the positioning context and make the dropdown absolute, for example:

nav .menu > li { position: relative; }
nav .menu li .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000; /* high enough to sit above page content */
}

If applying these changes still leaves the submenu behind the main content, inspect ancestor elements for anything that creates a stacking context: transforms (transform: translate/rotate/scale), opacity less than 1, filter, or an ancestor with its own positioned z-index. Also check for overflow: hidden on any parent (that will clip the submenu). Two ways to resolve those cases: remove or change the offending property on the ancestor, or take the submenu out of that ancestor (append it to body and position it with JS) so it’s in the top-level stacking context.

Debugging checklist: use browser DevTools to find the submenu element, verify its computed position and z-index, and look for “stacking context” indicators or transformed/filtered ancestors. Avoid moving large layout containers to absolute unless you intend to change their document flow; position the dropdown itself instead. For a concise reference on stacking contexts and z-index behavior, see MDN’s z-index documentation (https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).

Recommended Answers

All 3 Replies

Member Avatar for shaya4207

The '<div>' which are the sub menus (submenu_1 etc.) in the internal style should have 'z-index: 2;'

Member Avatar for bwallace

Thanks so much! That fixed it.

Member Avatar for shaya4207

My pleasure

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.