父元素带border-radius时，图片从绝对定位元素边缘透出问题

我设置了一个带有border-radius和overflow: hidden的父div，原本图片能遵循圆角规则，但添加绝对定位元素后，图片会从圆角边缘透出。尝试把图片包裹在另一个div里，没有效果。

现有代码 #

*{
 box-sizing: border-box;
  background: white;
}
.parent{
  border-radius: 16px;
  overflow: hidden;
  width: 200px;
  background: white;
  position: relative;
}

img{
  object-fit: cover;
  display: block;
  z-index: 1;
  overflow: auto;
}

.absolute{
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  background: white;
  padding: 10px;
  z-index: 99;
}

解决办法 #

这个问题是因为绝对定位元素触发了新的堆叠上下文，导致父元素的overflow: hidden无法正常裁剪图片。以下几种方法都能解决：

方法1：给父元素加isolation: isolate #

给.parent添加isolation: isolate，它会创建独立的堆叠上下文，让父元素的圆角裁剪规则覆盖内部所有元素：

.parent{
  border-radius: 16px;
  overflow: hidden;
  width: 200px;
  background: white;
  position: relative;
  isolation: isolate; /* 新增 */
}

方法2：给父元素设置非0的z-index #

给.parent设置任意非0的z-index值，同样能创建新的堆叠上下文，修复裁剪失效的问题：

.parent{
  border-radius: 16px;
  overflow: hidden;
  width: 200px;
  background: white;
  position: relative;
  z-index: 1; /* 新增 */
}

方法3：直接给图片加相同的border-radius #

让图片本身拥有和父元素一致的圆角，从根本上避免边缘透出的问题：

img{
  object-fit: cover;
  display: block;
  z-index: 1;
  border-radius: 16px; /* 和父元素圆角值一致 */
}

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