Good afternoon, colleagues!

Need advice newbie.

I create a business card site. There is a menu with the tag <nav> , and above it is the button "Make an appointment . "

When you press a button, a modal window pops up, but for some reason it is always behind the menu.

I carried the code of the modal window even beyond the <html> , still the menu with the <nav> higher.

What is the reason? Picture

  • check the z-index for modal and navigation, most likely the value for modal is lower than that of navigation - HamSter

2 answers 2

The whole problem is visible in z-index in css.

Look in the css styles for the nav tag which costs z-index and reduce it or let the css file look together.

  • For sure. He's nested in <div id = "wb_Extension1"> - Aibek Sydygaliev
  • # wb_Extension1 {z-index: 9999! important; } nav> ul.menu> li> ul.submenu {background: # 186471; position: absolute; left: 0; top: 100%; z-index: 9999; width: 180px; opacity: 0; transition: all 0.5s ease-in-out; -webkit-transform: scaleY (0); -ms-transform: scaleY (0); transform: scaleY (0); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } - Aibek Sydygaliev
  • @AibekSydygaliev here, it is necessary to reduce or make if possible, because it climbs even behind the background that appears with a modal window, and this is not very beautiful. - Yaroslav Molchan
  • Made # wb_Extension1 {z-index: 55! Important; } and nav> ul.menu> li> ul.submenu {z-index: 55;} It helped! THANKS TO ALL! - Aibek Sydygaliev
  • It means that somewhere else there is a z-index on another element, judging by the screenshot you have a modalka bootstrap with z-index: 1050 if you have not changed it, so look further on nav if the site is accessible from the outside would share a link, see it or Look at the z-index on the .modal class, maybe someone did there less than 55 - Yaroslav Molchan

This behavior occurs when the modal container has a fixed or relative position or is inside an element with a fixed or relative position.

Make sure that the modal container and all its parent elements are positioned correctly.

The easiest way to fix the problem is to move the modal div so that it is outside of any elements that have special positioning. For example, immediately before the closing tag. Or experiment with the CSS property {position:} until the problem disappears (the site may change, however). Sometimes it helps to change the value of z-index. More precisely, without your code is difficult to understand. Perhaps just some tag is not closed somewhere.

https://stackoverflow.com/questions/10636667/bootstrap-modal-appearing-under-background https://stackoverflow.com/questions/20983110/bootstrap-modal-sitting-behind-backdrop