Html 如何在固定元素的子元素中建立新的根级别z索引？

给定以下HTML：

#标题{
位置：固定；
z指数：1；
背景色：红色；
宽度：100%；
高度：150像素；
排名：0；
}
#下降{
位置：绝对位置；
顶部：5px；
宽度：100px；
背景颜色：绿色；
高度：400px；
z指数：3；
}
#页脚{
位置：固定；
z指数：2；
背景颜色：蓝色；
宽度：100%；
高度：150像素；
底部：0；
}

---

如果你可以接受静态的标题，那么我认为这就是你想要的

#标题{
位置：静态；
z指数：1；
背景色：红色；
宽度：100%；
高度：150像素；
排名：0；
}
#下降{
位置：绝对位置；
顶部：5px；
宽度：100px；
背景颜色：绿色；
高度：400px；
z指数：3；
}
#页脚{
位置：固定；
z指数：2；
背景颜色：蓝色；
宽度：100%；
高度：150像素；
底部：0；
}

---

根据当前标准，这与从

#标题

中删除

z索引

一样简单。默认z索引为

auto

，页眉、下拉菜单和页脚属于同一堆叠上下文，而

#drop

的z索引为3，将其推到页脚上方。您甚至可以从页脚中删除

z-index

；因为它位于文档顺序中的标题之后，所以它仍然位于顶部

试一试：

#标题{
位置：固定；
背景色：红色；
宽度：100%；
高度：150像素；
排名：0；
}
#下降{
位置：绝对位置；
顶部：5px；
宽度：100px；
背景颜色：绿色；
高度：400px；
z指数：3；
}
#页脚{
位置：固定；
背景颜色：蓝色；
宽度：100%；
高度：150像素；
底部：0；
}

如果不更改HTML，我几乎可以肯定这是不可能的。看，我同意，这似乎是不可能的。将其移出对我来说有一个缺点，我将不得不在JS中完成所有这些工作：（标题必须考虑动态高度，我将在其下方放置内容，因此这将是一场噩梦：（当

#drop

可见时，能否删除

#footer

上的

z-index

，因此

#标题

必须保持为

位置：固定

。它还表示“仅更改CSS”这个答案只会改变CSS，所以+1对于一个非常有趣的问题的创造性解决方案，我不能将其更改为静态…请参阅此问题的真实示例。

position:fixed

建立一个新的堆叠上下文可能会作为一个突破性的更改包含在定位布局模块中，其中

position:sticky

是还介绍了。请参见答案中添加的“谢谢”。