Столкнулась с такой проблемой: не могу правильно задать элементам z-index
, чтобы всё работало корректно. Вот тут код
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>
Примечание: у menuList
должен быть z-index
потому что там тень должна падать на кнопку. И кнопка должна перекрыть meat
. meat
должен перекрыть желтый блок (three
), но при этом он под меню и кнопкой. Далее, когда открывается модальное окно — все блоки под ним. И блок second
и bg
нельзя трогать. Не могу решить эту проблему — подскажите.
И еще такой вопрос: почему если я задала модальному окно z-index: 9999
, его всё равно перекрывают?