具有固定父级的绝对定位元素上的 z-index [重复]答案

【问题标题】：z-index on absolute positioned element with fixed parent [duplicate]具有固定父级的绝对定位元素上的 z-index [重复]
【发布时间】：2018-04-06 21:18:03
【问题描述】：

为什么 z-index 属性不适用于具有绝对位置的元素，如果该元素具有固定位置的父元素？我为这个案例做了简单的example

HTML：

<div id='q1'>
  <div id='q2'></div>  
</div>

CSS：

#q1 {
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: red;
  z-index: 0;
}

#q2 {
  position: absolute;
  top: 80%;
  border: 2px solid black;
  width: 100px;
  height: 30px;
  background-color: green;
  z-index: -1;
}

【问题讨论】：

标签： html css css-position z-index

【解决方案1】：

不能那样做，因为 z-index 是相对于同一堆栈的元素的，在您的情况下，您希望 child 的 z-index 低于 parent 的 z-index。

顺便说一句，如果你不让 #q2 成为 #q1 的孩子，它会像魅力一样发挥作用。

希望有帮助

【讨论】：

【解决方案2】：

和position属性无关，因为q2嵌套在q1里面

【讨论】：