Кoрректная работа z-index

285
11 июля 2018, 13:00

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

Answer 1

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

READ ALSO
JavaScript. Асинхронные функции. Что я делаю не так?

JavaScript. Асинхронные функции. Что я делаю не так?

Почему при сначала срабатывает функция UpdateValueMapBalances, а не ReadValueBalances?!

247
скриншот экрана с html2canvas

скриншот экрана с html2canvas

Проблема в том, что html2canvas делает скриншот всего селектора (в данном случа это body), который указанА как сделать так, чтобы был только скриншот...

265
Переменная имеет разные значения

Переменная имеет разные значения

Имеется код который с каким-то промежутком вызывается по CRON

241
Отследить открытие pop-up окна

Отследить открытие pop-up окна

Задача такая, пишу скрипт для сайта по сбору баллов, на котором по клику открывается pop-up окно с ютуб видеоМне надо как-то отследить его открытие...

268