为何overflow:hidden在div中生效，在body中却不生效？

在CSS Battle第15关中，我尝试给body设置overflow:hidden但未得到正确结果，换成div后效果符合预期，以下是具体代码和原因分析：

初始代码（无效） #

<style>
  html {
    background: #09042a;
  }
  body {
    margin: 0;
  }
  html::before, html::after,
  body, body::after {
    content: '';
    position: absolute;
    top: 75px;
    border-radius: 50%;
    width: 150px;
    height: 150px;
  }
  html::before, html::after {
    z-index: 10;
  }
  html::before {
    left: 75px;
    background: #7b3f61;
  }
  html::after {
    left: 175px;
    background: #e78481;
  }
  body {
    position: relative;
    left: 75px;
    margin: 0;
    overflow: hidden;
  }
  body::after {
    top: 0;
    left: 100px;
    background: #09042a;
    z-index: 15;
  }
</style>

修改后代码（有效） #

<div></div>
<style>
  body {
    background: #09042a;
  }
  body {
    margin: 0;
  }
  body::before, body::after,
  div, div::after {
    content: '';
    position: absolute;
    top: 75px;
    border-radius: 50%;
    width: 150px;
    height: 150px;
  }
  body::before, body::after {
    z-index: 10;
  }
  body::before {
    left: 75px;
    background: #7b3f61;
  }
  body::after {
    left: 175px;
    background: #e78481;
  }
  div {
    position: relative;
    left: 75px;
    margin: 0;
    overflow: hidden;
  }
  div::after {
    top: 0;
    left: 100px;
    background: #09042a;
    z-index: 15;
  }
</style>

核心原因 #

1. body元素的overflow特殊处理逻辑 #

浏览器对body这个根层级元素有特殊的溢出处理规则：默认情况下，给body设置overflow:hidden时，浏览器会自动将这个属性的效果转移到html元素上，body自身的内容并不会被裁剪。这是为了兼容早期网页布局形成的历史机制。

2. 代码中的具体问题 #

• 初始代码里，body被设置为position:relative，同时body::after是绝对定位元素。但由于overflow的特殊规则，body的overflow:hidden并没有作用在自身，导致body::after这个黑色遮罩无法被body裁剪，达不到预期的遮挡效果。
• 换成div后，div是普通块级元素，没有body的特殊规则：当div设置position:relative和overflow:hidden时，其内部的绝对定位子元素（div::after）会被正常裁剪，遮罩就能正确覆盖目标区域，实现预期效果。

另外，初始代码里把body本身设置成圆形（批量选择器中给body添加了宽高和圆角），这违背了body作为页面根容器的定位逻辑，换成div来承载圆形和遮罩，让body作为页面背景容器，布局更合理。

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