Наложение CSS на тело страницы

#html #css #iframe

#HTML #css #iframe

Вопрос:

У меня есть DOM, который выглядит следующим образом:

 <body>
  <div id="main">
    <iframe id="content"></iframe>
  </div>
  <div id="overlayWrapper">
    <div id="overlay"><--THIS IS EMPTY DIV--></div>
  </div>
</body>

Там, где внутри main div, у меня есть и другие материалы, которые здесь не очень уместны. Теперь у этих divs есть следующие классы CSS.

 #main {
  width: 100%;
  position: static;
  z-index: 2;
  overflow: hidden;
}

#content {
  width: 100%;
  height: 500px;
  z-index: 3000; // This doesn't seem to help.
}

#overlayWrapper {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1000; // This needs to be at least 1000 for overlay to cover all elements in the page
  position: fixed; // This seems to cause the problem?!
}

#overlay {
  opacity: 1;
  will-change: opacity;
  transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-tap-highlight-color: transparent;
}

Теперь, похоже, это работает в некоторой степени, поскольку я вижу, что мое наложение со background-color значением rgba(0, 0, 0, 0.5) появляется на экране.

Проблема в том, что я не могу щелкнуть по материалу, который находится внутри iframe .

Я заметил, что это происходит из-за position: fixed стиля в #overlayWrapper .

Если я удалю его, то смогу щелкнуть по материалу из iframe , но теперь наложение больше не отображается.

Возможно ли вообще как-то сохранить наложение, но снова сделать материал на iframe интерактивным?

Я попытался добавить z-index: 3000; в iframe (т.Е. в #content ), но, похоже, это не сработало.

Есть идеи?

Ответ №1:

z-index работает только с расположенными элементами. Это означает, что z-индекс, к которому вы применили #content , который является iframe, не действует.

 #content {
  position: relative;
  z-index: 3000;
}

Вот рабочий jsfiddle.

PS: Я добавил несколько ссылок в #main для имитации содержимого, которое может быть у вас на странице.

Ответ №2:

Это потому, что z-index свойство div#main элемента должно быть помещено перед z-index div#overlayWrapper элементом.

Ответ №3:

Используется position: relative для <iframe> элемента, потому что z-index свойство вступает в действие с его относительным значением.

 #content {
  width: 100%;
  height: 500px;
  /* This doesn't seem to help */
  z-index: 3000;
  position: relative;
}