页脚与具有子绝对位置的相对位置的兄弟重叠

Question

孩子的身高超过了父母的div。我们有一些技巧吗？或替代解决方案。

我只是简化了代码。我也有codepen here 你在codepen中看到孩子与页脚重叠。我希望页脚低于孩子。

html

<div class="wrapper">
<div id="sibling-1">
  <div class="child"></div>
</div>
<footer id="sibling-2"></footer>
</div>

CSS

.wrapper {
  height: 500px;
  background: pink;
}
#sibling-1 {
  background: grey;
  height: 200px;
  width: 300px;
  position: relative;
}
.child {
  position: absolute;
  background: green;
  width: 250px;
  height: 300px;
}
#sibling-2 {
  width: 300px;
  height: 200px;
  background: blue;
}