#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
элементом.
Комментарии:
1. Я попытался установить для него значение
z-index: 5000
, for#main
, это не помогло.2. чего вы хотите достичь?
Ответ №3:
Используется position: relative
для <iframe>
элемента, потому что z-index
свойство вступает в действие с его относительным значением.
#content {
width: 100%;
height: 500px;
/* This doesn't seem to help */
z-index: 3000;
position: relative;
}
Комментарии:
1. Это решение работает, я не понимаю, почему это было отклонено.