Faced such a problem: I can not correctly set the elements of z-index so that everything works correctly. Here is the code

 function myBtn() { document.getElementById('modalW').style.display = 'block'; } function closee() { document.getElementById('modalW').style.display = 'none'; } window.onclick = function(event) { if (event.target == document.getElementById('modalW')) { document.getElementById('modalW').style.display = 'none'; } } 
 #second { position: relative; } .meat { z-index: 1; position: absolute; top: 96px; left: 443px; } #second .bg { position: absolute; z-index: -1 } .bg img { height: 500px; } .menuList { position: relative; bottom: 13px; left: 190px; box-shadow: 6px 5px 2px 0 rgba(0, 0, 0, 0.06); z-index: 3; } .menuList__right-buttons { position: relative; z-index: 1; bottom: 50px; left: 620px; } .menuList__right-buttons img { width: 50px; height: 50px; } #three img { width: 900px; } .modalOne { display: none; position: fixed; left: 0; top: 0; background: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; z-index: 9999; } .modalW { margin: 4% auto; width: 596px; height: 482px; background: #f8f9fa; padding: 0px 40px 10px 41px; } 
 <section id="second"> <div class="bg"> <img src=https://ic.pics.livejournal.com/alkrylov/23585211/329031/329031_original.jpg> </div> <div class="meat"> <img src=http://www.hinnawi.org.il/wp-content/uploads/Brisket.png> </div> <div class="menuList"> <img src=http://freedesignfile.com/upload/2015/01/Modern-restaurant-menu-list-design-vectors.jpg> </div> <div class="menuList__right-buttons"> <img src=https://i.ebayimg.com/thumbs/images/m/mdLOP8WN4_-K3ERQyPzgPvQ/s-l225.jpg> </div> <div id="three"> <img src=http://media.womtec.com/yellow-color/yellow.jpg> </div> </section> <div class="modalOne" id="modalW"> <div class="modalW"> <img src=http://dontforget.pro/wp-content/uploads/2014/04/modal.png> </div> </div> <button onclick="myBtn()">Связаться с нами</button>

Codepen

Note: menuList should be z-index because there should be a shadow on the button. And the button should block the meat . meat should block the yellow block ( three ), but at the same time it is under the menu and the button. Further, when a modal window opens - all the blocks under it. And block second and bg can not be touched. I can not solve this problem - tell me.

And another question: why if I asked the z-index: 9999 modal window, do they still overlap it?

  • Link you are not working on CodPenYo - Kosta B.

1 answer 1

Everything was decided, by its negligence, z-index for the modal window prescribed the wrong line. Everything is working)