如何实现子元素位于父元素后方且不覆盖外层主容器？

需求说明 #

我需要一个占视口100%宽度、100vh高度的祖级元素（类似section区块），其内部包含一个父元素，父元素中嵌套一个设置了absolute定位的子元素。

HTML结构如下：

<body>
  <div class="container">
    <div class="parentElement">
      <div class="ChildrenElement">
      
      </div>
    </div>
  </div>
</body>

初始样式如下：

.container {
  background-color:black;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

.parentElement {
  position:relative;
  background-color:blue;
  width: 800px;
  height: 200px;
}

.ChildrenElement {
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,192,203, 0.5);
  transform: translate(10%);
}

问题描述 #

当前半透明粉色的子元素偏移后，超出蓝色父元素的部分会覆盖在黑色的祖级容器上方，我希望超出父元素范围的子元素部分不会覆盖主容器，视觉效果上仅保留父元素范围内的子元素内容。

解决方案 #

实现你要的效果最简便的方式是直接裁剪父元素的溢出内容，视觉效果完全匹配需求：
给父元素添加overflow: hidden属性，会自动裁掉超出父元素范围的子元素内容，修改后的样式如下：

.parentElement {
  position:relative;
  background-color:blue;
  width: 800px;
  height: 200px;
  /* 新增以下属性即可 */
  overflow: hidden;
}

如果确实需要子元素溢出部分真实存在于页面层级中而非被裁剪，可以通过拆分祖容器的背景层、调整堆叠上下文的方式实现，不过业务场景无特殊要求时使用overflow: hidden是性能最优、维护成本最低的方案。

内容的提问来源于stack exchange，提问作者josmanuel