Html 如何在不使用3d变换或透视的情况下处理多层堆叠上下文问题？

有没有一种不使用3D变换/透视的方法来实现

*{
保证金：0；
框大小：边框框；
}
身体，
html{
高度：100vh；
}
/*主体=主体（在real app中）*/
主要{
变换样式：保留-3d；
高度：100vh；
}
第1节集装箱{
显示：内容；
位置：相对位置；
高度：100vh；
}
section.container section.list{
变换样式：保留-3d；
显示：网格；
网格模板行：自动；
网格行间距：10px；
位置：绝对位置；
最高：50%；
左：50%；
宽度：45vw；
转换：翻译（-50%，-50%）；
}
分部项目{
高度：50px；
背景色：白色；
}
div.item.highlighted{
变换：translateZ（10px）；
}
第1节模态{
位置：固定；
排名：0；
左：0；
宽度：100vw；
高度：100vh；
背景色：#0009；
变换：translateZ（5px）；
}
第1节图像{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
第4节图像img{
显示：块；
对象匹配：覆盖；
宽度：100%；
身高：100%；
}
span.content{
背景色：白色；
位置：固定；
顶部：calc（50%+20vw）；
左：50%；
转换：翻译（-50%，-50%）；
}

项目1
项目2
项目3
模态内容

您可以避免所有变换，并以与使用z-index不同的方式居中元素。只需避免将任何

z-index

设置为容器，即可避免创建堆叠上下文。仅对模态元素和要高亮显示的元素使用

z-index

*{
保证金：0；
框大小：边框框；
}
身体，
html{
高度：100vh；
}
/*主体=主体（在real app中）*/
主要{
高度：100vh；
}
第1节集装箱{
高度：100vh；
显示器：flex；
}
section.container section.list{
显示：网格；
网格模板行：自动；
网格行间距：10px；
宽度：45vw；
保证金：自动；
位置：相对位置；
}
分部项目{
高度：50px；
背景色：白色；
}
div.item.highlighted{
z指数：10；
位置：相对位置；
}
第1节模态{
位置：固定；
排名：0；
左：0；
宽度：100vw；
高度：100vh；
背景色：#0009；
z指数：5；
}
第1节图像{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
第4节图像img{
显示：块；
对象匹配：覆盖；
宽度：100%；
身高：100%；
}
span.content{
背景色：白色；
位置：固定；
顶部：calc（50%+20vw）；
左：50%；
转换：翻译（-50%，-50%）；
}

项目1
项目2
项目3
模态内容

好吧，我确实错过了一些东西。。。有两种类型的上下文吗？因为flex的子级应该通过创建另一个上下文，但似乎没有。我真的不明白为什么这个解决方案（在flexbox上）有效，为什么使用转换或隔离不起作用。你能解释一下吗？转换和flexbox的子级之间（在上下文创建中）有什么区别？@vbargl只需再次读取它，您就会注意到这个

z-index值而不是auto.

。。因此，如果没有指定z索引，则没有堆栈contexnt；）哦这么愚蠢的错误！谢谢，我非常想念。。。因此，在本例中，具有z-index的元素将创建新的上下文，但也将完全按照我的需要显示？@vbargl yes quickly；）