伪元素背景超出父元素未被overflow:hidden裁剪的问题排查

为父元素设置伪元素并使用background-image时，父元素的overflow:hidden属性无法对伪元素的背景图生效，无法隐藏超出父元素的部分。需要隐藏超出父元素的背景，且不能修改元素层级。

问题示意图：

原代码 #

CSS

.main {
  background-color: orange;
}

.grandparent {
  margin: 0 auto;
  position: relative;
  background-color: red;
  width: 737.3px;
  height: 368.65px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
}
.parent {
  z-index: 1;
  overflow: hidden;
  background-color: green;
  width: 221.19px;
  height: 307.2px;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
}

.child {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
    width: 50%;
    height: 100%;
/*     background-color: purple; */
    border: 3px dashed red;
    z-index: 1;
}

.parent::before {
    content: "";
    position: absolute;
    height: inherit;
    width: 100%;
    background-image: url('https://images.pexels.com/photos/592077/pexels-photo-592077.jpeg?cs=srgb&dl=pexels-katja-79053-592077.jpg&fm=jpg');
    background-repeat: no-repeat;
    background-size: cover;
    transform-origin: center;
    background-position: bottom 30% center;
    left: 0; 
    right: 0;
/*     border: 1px solid; */
}

HTML

<div class="main">
  <div class="grandparent">
    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</div>

问题原因 #

绝对定位的元素会相对于最近的已定位（position值不为static）祖先元素进行定位。你的.grandparent设置了position:relative，所以.parent::before实际上是相对于.grandparent来定位的，而非.parent。这种情况下，.parent的overflow:hidden根本管不到不属于自己定位上下文的伪元素，自然无法裁剪超出部分。

解决方案 #

给.parent添加position:relative，把伪元素的定位上下文切换到.parent上，这样.parent的overflow:hidden就能正确生效，裁剪掉超出其边界的背景图，同时不需要修改任何元素的层级。

修改后的.parent CSS代码：

.parent {
  z-index: 1;
  overflow: hidden;
  background-color: green;
  width: 221.19px;
  height: 307.2px;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  position: relative; /* 新增这一行 */
}

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