Css 如何将转换后的元素保持在另一个元素后面？

.container{
宽度：100px；
高度：100px；
字体大小：100px；
}
.背景{
颜色：红色；
宽度：100%；
身高：100%；
利润底部：-100%；
变换：旋转（90度）；
}
.前景{
颜色：蓝色；
宽度：100%；
身高：100%；
}

B
F

您可以给出前景的

位置：relative

，它将显示在顶部，如下所示：

.container{
宽度：100px；
高度：100px；
字体大小：100px；
}
.背景{
颜色：红色；
宽度：100%；
身高：100%；
利润底部：-100%；
变换：旋转（90度）；
}
.前景{
颜色：蓝色；
宽度：100%；
身高：100%；
位置：相对位置；
}

B
F

问题在于

转换

为元素创建一个新的“堆叠上下文”，它取代了源顺序，否则将确定哪个元素位于“顶部”

有几种方法可以解决这个问题，但我最喜欢的方法是在前景元素中添加一个

不透明度
属性，以避开CSS的z-index计算的这种奇怪现象：


.container{
宽度：100px；
高度：100px；
字体大小：100px；
}
.背景{
颜色：红色；
宽度：100%；
身高：100%；
利润底部：-100%；
变换：旋转（90度）；
} 
.前景{
颜色：蓝色；
宽度：100%；
身高：100%；
不透明度：0.999；
}

B
F
只需在两个层中添加一个
位置：相对
，然后使用
z-index
对它们进行排序（如果未设置
位置
，则视为
静态
，
静态
不考虑z-index）


.container{
宽度：100px；
高度：100px；
字体大小：100px；
}
.背景{
颜色：红色；
宽度：100%；
身高：100%；
利润底部：-100%；
变换：旋转（90度）；
位置：相对位置；
z指数：1；
}
.前景{
颜色：蓝色；
宽度：100%；
身高：100%；
位置：相对位置；
z指数：2；
}

B
F
您可以在前台元素上使用属性，该属性创建了一个新的堆叠上下文


.container{
宽度：100px；
高度：100px；
字体大小：100px；
}
.背景{
颜色：红色；
宽度：100%；
身高：100%；
利润底部：-100%；
变换：旋转（90度）；
}
.前景{
颜色：蓝色；
宽度：100%；
身高：100%；
隔离：隔离；
}

B
F
为什么这是您的最爱？这很酷，它的作品（不知道），但我觉得这是一种黑客，有人阅读您的代码后，将不得不知道这一点，以了解它-它只是看起来非常迟钝。。。（但仍然很酷）
有几种方法可以解决这个问题
-->我不同意这是个问题，这是CSS的工作方式，我们需要调整位置/z-index。位置：相对，而不是不透明度更适合在这种情况下case@somethinghere我发现它在更多情况下更灵活。很多时候，我不想更改元素的
位置
属性，以使它们更好地使用
z-index
z-index
，因为它没有尺度，也很容易在不相关的元素之间产生激烈的竞争，所以我尽量避免使用它。（好的，你的
z-index
是
1
；我会用
2
；好的，你用
2
我会用
10
；好的，我会用
200
，等等。）是的，我也看到了所有这些问题的出现，尽管这主要是一个计划性的事情，而不是任何事情：）再说一次，这很酷，我只是觉得它太迟钝了，如果其他人不知道这个，他们会被你的代码卡住一段时间。。。差错另外，相对位置与静态位置相比没有区别，对吗？或者我遗漏了一些可能存在问题的案例？是的，可能类似的情况非常罕见，当我们使用如此简单的示例时，很难想象它们（我同意just
position:relative
可能是给定标记的更简单解决方案）。有一次您可能无法更改
位置
是因为您已经在使用它来定位元素（请参阅我的第一个链接中的播放问题）。然后，如果您仍然想避免使用
z-index
，那么您就少了一个工具，接下来我将转到
opacity
，但这确实是个人的偏好。简单的位置：relative就足够了；）位置：相对于第二个就足够了，不需要任何z-index@TemaniAfif是的，但这确实说明了发生了什么，目的是什么。@something这里是的！我也没有，但我在读z-index的时候在MDN上看到了它。