时间戳

首页 > 解决方案 > CSS覆盖在页面主体上

html - CSS覆盖在页面主体上

问题描述

我有一个看起来像这样的 DOM：

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

在maindiv 里面我还有一些其他的东西，这里不是很相关。现在，这些 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（即 to #content），但这似乎不起作用。

有任何想法吗？

标签： htmlcssiframe

解决方案

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

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

推荐阅读