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

Posted 2023-03-06

【中文标题】具有固定父级的绝对定位元素上的 z-index [重复]

【英文标题】：z-index on absolute positioned element with fixed parent [duplicate]

【发布时间】：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;

【参考方案1】：

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

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

希望有帮助

【参考方案2】：

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