html - 尽管 z-index 较低，但我的绝对定位 div 覆盖了我的另一个 div

这太奇怪了，尽管复制粘贴了代码，但我什至无法在 jsfiddle 中复制错误。

基本上我是这样的:

<div class="container">
    <div class="absolute-background" />
    <div class="where-is-this" />
</div>

使用这个 CSS:

.container {
  background: transparent;
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.absolute-background {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: blue;
  z-index: 0;
}

.where-is-this {
  height: 100px;
  width: 100%;
  z-index: 1000000;
  background: red;
}

这应该会在屏幕顶部显示一个红色框，就像在这个 fiddle 中一样:https://jsfiddle.net/Lmj6d625/

但是，在我的实际页面(在同一浏览器上)中，蓝色覆盖了所有内容。我什至可以在下面添加带有文本的新 div，它们会完全隐藏。

截图:

Where is my div?!

有人对如何解决这个问题有任何建议吗？

最佳答案

z-index 属性仅适用于位置值不是静态的元素(例如position:absolute；position:relative；或位置:固定)。

还有position: sticky;在 Firefox 中受支持，在 Safari 中有前缀，在旧版本的 Chrome 中以自定义标志工作了一段时间，微软正在考虑将其添加到他们的 Edge 浏览器中。感谢 Evert 的回答

关于html - 尽管 z-index 较低，但我的绝对定位 div 覆盖了我的另一个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49903356/