Html 子元素和同级元素中的Z索引问题

我的页面中有三个

div

• 单亲（

  z-index:5

  ）
• （父母的）一个兄弟姐妹（

  z-index:10

  ）
• 一个孩子（父母的）（

  z-index:11

  ）

所有

div

都使用

position:fixed

属性

我的问题是这三个元素的堆叠顺序

我在应用程序中将“兄弟姐妹”div用作冻结层

我希望兄弟姐妹

div

位于父级和子级之间

div

好的，通过使用

position:fixed

属性，我们可以将div放置在页面中的任何位置，并使用任何堆叠顺序

但它不适用于我目前的情况

请查找所附代码：

。已修复{
位置：固定；
}
.外部{
排名：0；
左：0；
底部：0；
右：0；
背景：黄色；
z指数：5；
}
.孩子{
宽度：200px；
高度：30px；
排名：0；
左：50%；
转化：translateX（-50%）；
背景：红色；
z指数：11；
颜色：#fff；
}
.兄弟姐妹{
排名：0；
左：0；
底部：0；
右：0；
背景：rgba（0,0,0,0.6）；
z指数：10；
}

我希望这个部门在最上面

您能像这样更改html结构吗？那时它正在工作

<div class="fixed outer">
  <div class="fixed child">
    I want this div to be on top
  </div>
  <div class="fixed sibling">

  </div>
</div>

我希望这个部门在最上面

您的假设不正确

位置：固定

创建新的

堆叠上下文由以下场景中的任何元素在文档中的任何位置形成：

文档的根元素（）

• [……]

• 元素具有

  位置

  值

  固定

  或

  粘性

  （适用于所有移动浏览器，但不适用于较旧的桌面）

在堆叠上下文中，

z-index

值将影响堆叠顺序，但不会影响外部

（同一来源，我的重点）

在堆叠上下文中，子元素根据前面解释的相同规则进行堆叠重要的是，其子堆叠上下文的

z-index

值仅在此父级中有意义。堆叠上下文在父级堆叠上下文中被原子地视为单个单元

我自己发现这在大多数应用程序中不是很有用

因此，如果元素共享相同的堆叠上下文，则只能对元素之间的堆叠顺序产生影响。在您的情况下，必须更改HTML代码。我想，你不想这样，但你可以用伪元素来拯救

。已修复{
位置：固定；
}
正文：之后{
内容：''；
位置：固定；
排名：0；
左：0；
底部：0；
右：0；
背景：黄色；
z指数：5；
}
.孩子{
宽度：200px；
高度：30px；
排名：0；
左：50%；
转化：translateX（-50%）；
背景：红色；
z指数：11；
颜色：#fff；
}
.兄弟姐妹{
排名：0；
左：0；
底部：0；
右：0；
背景：rgba（0,0,0,0.6）；
z指数：10；
}

我希望这个部门在最上面

我无法修改HTML结构。您唯一的方法是从父元素中删除positiion:fixed和z-index，以便能够将子元素带到后面：很抱歉，在您的小提琴中，

.sibling

冻结层不可见，因为它位于

.parent

元素后面。我希望

.sibling

堆叠在

.child

和

.parent

之间。只需在不接触父对象的情况下调整z索引，即可将父对象的位置更改为

绝对

。我无法继续回答这个问题，因为我需要所有三个div都位于

位置：fixed

。我不认为这是一个与你提到的问题重复的问题！正如我所说，如果你保持立场：你不能这样做，这是不可能的。该副本是一个规范副本，解释了您需要了解的有关堆叠上下文、绘制顺序、z索引等的所有信息。如果您仔细阅读，您将理解为什么您想要的是根本不可能的