Member Avatar for hebamj

have problem of Drop Down Menu Overlaps with Image Map of my Website. This happens when I click on Top menu bar (drop down).

The expected output is, the drop down menu should appear above the map.

I am having problems with structure of the webpages in different browsers. for one browser it will display correctly for another browser like IE or Mozilla it will not display exactly. Do we have any browser compatibility code (in html or javascript or css)

  • 4 Contributors
  • 3 Replies
  • 246 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by e.techie

Dani AI

Generated

This thread highlights the classic case where a dropdown visually falls behind an interactive map. identified the right direction (layering/positioning) and later posts from and confirm that a z-index-based fix often works. The notes below clarify why the problem sometimes persists and offer durable checks and fixes that survive browser quirks and modern CSS stacking rules.

Core idea: z-index only applies within a stacking context. A stacking context can be created not only by a positioned element with z-index, but also by CSS properties such as transforms, opacity < 1, filters, certain flex/grid situations, isolation, and some uses of will-change. If the map element or any ancestor forms its own stacking context, a dropdown in a different stacking context can never cross above it even with a larger numeric z-index. Also, elements inside an iframe or a windowed plugin (old Flash/ActiveX) cannot be overlaid by parent-page elements.

Practical checklist (apply in order):

  • Ensure the dropdown is not nested inside the map’s container; place the nav/menu at page-level (sibling to the map) so it can form a higher stacking context.
  • Remove or avoid transforms/opacity on ancestors of the map (these often accidentally create a new stacking context).
  • If the map is rendered inside an iframe, put the dropdown in the parent document (overlays cannot cross iframe boundaries).
  • For legacy embedded windowed objects, use wmode=opaque/transparent or replace the object (modern pages rarely need this).
  • Use browser DevTools to inspect stacking contexts and computed z-index values; Chrome/Firefox show stacking-context markers that make the problem obvious.

Example of a common culprit and a simple resolution:

/* culprit: parent creates a stacking context */
.map-wrapper { transform: translateZ(0); }

/* working: top-level nav outside map, positioned above */
.main-nav { position: fixed; z-index: 10000; }

Applying the checklist and confirming stacking contexts in DevTools resolves most cross-browser overlap issues without hacks.

Recommended Answers

All 3 Replies

Member Avatar for CJesusSaves

I'm guessing your HTML utilizes DIV containers, so using CSS, change the z-index of your containers.

#menu{
/*Other code bla bla*/
z-index: 1;
position: absolute;
}
#map{
/*Other code bla bla*/
z-index: 2;
position: absolute;
}

You will now need to specify height parameters for these containers, and they should be wrapped/nested in another DIV parent container which should have a position:relative.

It's best that in your HTML, your menu DIV container precedes your map DIV container.

Edited by CJesusSaves because: n/a
Member Avatar for oinkpink

thank you CJesusSaves
it works like magic

Member Avatar for e.techie

Thanks CJesusSaves a lot..really very nice code snippet..it worked in one shot..

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.