У меня есть 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 у меня есть и другие вещи, которые здесь не очень актуальны. Теперь у этих элементов есть следующие классы 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), но, похоже, это не сработало.
Есть идеи?