Html 如何将元素与CSS重叠

我希望元素

ipsum

和文本“Hello World”重叠元素

lorem

和文本“此元素应隐藏在后面”

实际上，我可以通过在

ipsum

元素中添加

background color:white

来解决这个问题。但就我而言，我不想那样做

.container{
高度：100vh；
宽度：100%；
}
洛雷姆先生{
位置：绝对位置；
背景颜色：黄色；
z指数：-1；
排名：0；
左：0；
}
.同侧{
位置：相对位置；
z指数：1；
变换：translateY（100px）；
/*设置背景色将按预期工作。但我不想使用背景色，因为我认为强制背景色为白色或单色对未来不好*/
/*背景：白色*/
}

这个元素应该隐藏在后面

你好，世界

这解决了我的问题。 通过将

container

的元素包装到

app

元素中并添加此样式

.app {
  background-color: white;
}
.ipsum {
  background-color: inherit;
}

现在，我的组件将与

lorem

组件重叠，但我可以从根位置更改背景颜色（不强制使用一种颜色）

.app{
背景色：白色；
}
.集装箱{
高度：100vh；
宽度：100%；
}
洛雷姆先生{
位置：绝对位置；
背景颜色：黄色；
z指数：-1；
排名：0；
左：0；
}
.同侧{
位置：相对位置；
z指数：1；
变换：translateY（100px）；
背景色：继承；
}

这个元素应该隐藏在后面

你好，世界

将html和css放在问题中，而不仅仅是链接到它。理想情况下，它是一个可运行的代码段，但至少是一个代码块。另外，如前所述，要隐藏的元素已经位于另一个元素的后面，但您不希望使用背景色来掩盖其存在。你想实现什么，因为你的“预期结果”可以通过设置ipsum元素背景色的样式轻松实现？@DavidSaysRestatemonica我不想使用背景色，因为我认为强制背景色为白色或一种颜色对未来不利。