0

Столкнулась с такой проблемой: не могу правильно задать элементам 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>

CodePen

Примечание: у menuList должен быть z-index потому что там тень должна падать на кнопку. И кнопка должна перекрыть meat. meat должен перекрыть желтый блок (three), но при этом он под меню и кнопкой. Далее, когда открывается модальное окно — все блоки под ним. И блок second и bg нельзя трогать. Не могу решить эту проблему — подскажите.

И еще такой вопрос: почему если я задала модальному окно z-index: 9999, его всё равно перекрывают?

1
  • Линк у вас не рабочий на КодПенЙо
    – Kosta B.
    Commented 10 июн. 2018 в 20:40

1 ответ 1

0

Все решилось, по своей не внимательности z-index для модального окна прописала не в ту строку. Все работает)

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.