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

Question

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

确切地说，这是小提琴：

https://jsfiddle.net/Rokke/wb10ozme/7/

<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;
}

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