Question

我有一个看起来像这样的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中，我还有其他一些东西，在这里不是很重要。现在，这些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），但这似乎不起作用。

有什么想法吗？

Answer 1

在position: relative元素上使用<iframe>，因为z-index属性与其相对属性开始起作用。

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

Answer 2

z-index仅适用于positioned elements。这意味着您应用于#content（即iframe）的z-index无效。

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

这是工作中的jsfiddle。

PS：我在#main中添加了一些链接，以模拟您在页面上可能拥有的内容。

Answer 3

这是因为div#main元素的z-index属性应放在div#overlayWrapper元素的{{1}}之前。

CSS覆盖在页面主体上

3 个答案: