Css 如何在不使用绝对定位的情况下沿z轴堆叠元素？

假设我想要一个不滚动的布局（意味着宽度=100，高度=100），只有一个容器和 两个子元素。现在，当您不应用任何定位上下文时，所有元素都遵循文档的自然流，这意味着它们彼此堆叠在一起。如何在不使用绝对定位的情况下实现沿z轴的定位（将它们堆叠在彼此的前面）

准确地说，这里是小提琴：

Child-01
Child-02
html{
宽度：100%；
身高：100%；
溢出：隐藏；
}
.包装纸{
宽度：100%；
身高：100%；
背景色：黑色；
}
.child-01{
宽度：350px；
高度：450px；
背景色：红色；
}
.child-02{
宽度：650px；
高度：350px；
背景颜色：蓝色；
}

---

我想要实现的是：child-01水平居中于页面的底部边缘，child-02水平居中，但在child-01前面。我通过使用绝对定位实现了这一点，但当您打开开发人员工具时，它会移动（因为bottom:0属性）。如果我要使用相对位置，我将不得不使用负边距使它们在彼此前面。有人知道如何以更好的方式实现这一点吗

仅供参考，您可以在3个垂直点下从窗口“分离”开发工具（或将其移动到右侧），并将“停靠侧”更改为其他选项之一。可能对你有帮助。你能解释一下为什么不想使用绝对定位吗？你能提供一个你希望实现的形象吗？你有没有玩过我知道如何分离开发工具，但是你能想象当你打开移动设备上的键盘时会发生什么吗无论如何，关于变换，我可以使用它，但这不是这个属性的最初目的。说实话，我讨厌CSS黑客。我喜欢在使用东西的同时牢记它们最初的用途。我试着在我的项目中应用负利润率和相对定位，现在它已经正常工作了。但我总是想知道我做事情的方式是否正确。我会更新我的小提琴，这样你就可以清楚地看到我的想法了。

<div class="wrapper">
  <div class="child-01">Child-01</div>
  <div class="child-02">Child-02</div>
</div>


html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.wrapper {
  width: 100%;
  height: 100%;
  background-color: black;
}

.child-01 {
  width: 350px;
  height: 450px;
  background-color: red;
}
.child-02 {
  width: 650px;
  height: 350px;
  background-color: blue;
}