【问题标题】：z-index not working with position absolutez-index 不适用于绝对位置
【发布时间】：2013-01-07 03:51:52
【问题描述】：

我打开控制台 (chrome\firefox) 并运行以下行：

$("body").append("<div id=\"popupFrame\" style=\"width:100%;height:100%;background-color:black;opacity:0.5;position:absolute;top:0;left:0;z-index:1;\" />");
$("body").append("<div id=\"popupContent\" style=\"width:200px;height:200px;z-index:1000;background-color:white;\" >dasdasdsadasdasdasdasdasd</div>");

#popupContent 应该是最重要的，但它会受到 #popupFrame 不透明度的影响。

#popupFrame 中不包含内容，这很奇怪。

目标是创建类似firefox的警告框

【问题讨论】：

标签： html css

【解决方案1】：

我遇到了同样的问题，我尝试通过appending 元素和div 中的div 和sticky position 来解决它，我的问题是快速拨号（reactjs + 材料），所以我不知道它是否适用于所有情况。

【讨论】：

【解决方案2】：

我在使用position: absolute; 时经常遇到这个问题，我在子元素中使用position: relative 时遇到了这个问题。不需要把position: absolute改成relative，只需要添加子元素看看下面两个例子：

let toggle = document.getElementById('toggle')

toggle.addEventListener("click", () => {
 toggle.classList.toggle('change');
})

.container {
  width: 60px;
  height: 22px;
  background: #333;
  border-radius: 20px;
  position: relative;
  cursor: pointer;

}

.change .slide {
  transform: translateX(33px);
}

.slide {
  transition: 0.5s;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 20px;
  margin: 2px 2px;
  z-index: 100;
}

.dot {
  width: 10px;
  height: 16px;
  background: red;
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 1;
}

<div class="container" id="toggle">
  <div class="slide"></div>
  <div class="dot"></div>
</div>

这是使用相对位置固定的方法：

let toggle = document.getElementById('toggle')

toggle.addEventListener("click", () => {
 toggle.classList.toggle('change');
})

.container {
  width: 60px;
  height: 22px;
  background: #333;
  border-radius: 20px;
  position: relative;
  cursor: pointer;

}

.change .slide {
  transform: translateX(33px);
}

.slide {
  transition: 0.5s;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 20px;
  margin: 2px 2px;
  z-index: 100;
  
  // Just add position relative;
  position: relative;
}

.dot {
  width: 10px;
  height: 16px;
  background: red;
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 1;
}

<div class="container" id="toggle">
  <div class="slide"></div>
  <div class="dot"></div>
</div>

Sandbox here

【讨论】：

【解决方案3】：

老问题，但这个答案可能对某人有所帮助。

如果你试图在容器边界之外显示容器的内容，请确保它没有overflow:hidden，否则它之外的任何东西都会被截断。

【讨论】：

【解决方案4】：

z-index 仅适用于已明确指定位置的元素。将position:relative 添加到#popupContent，您就可以开始了。

【讨论】：

【解决方案5】：

第二个 div 是 position: static（默认），因此 z-index 不适用于它。

您需要定位（将位置属性设置为static 以外的任何内容，在这种情况下您可能需要relative）任何您想要提供z-index 的东西。

【讨论】：

【解决方案6】：

不透明度会改变 z-index 的上下文，静态定位也是如此。要么为没有它的元素添加不透明度，要么从有它的元素中删除它。您还必须使两个元素都静态定位或指定相对或绝对位置。以下是有关上下文的一些背景知识：http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

【讨论】：

哇。根据这篇文章，这包括不透明度、“变换、过滤器、css 区域、分页媒体，可能还有其他”。
哇，不知道这个！真的很有帮助。谢谢