当应用于body或div时,相同的CSS表现不同

Question

使用DIV作为容器

<div class="container">
  <div class="half-hidden"></div>
</div>

CSS

.container {
  margin: 20px auto 0;
  width: 200px;
  height: 200px;

  border: 1px solid red;
  position: relative;
  overflow: hidden;
}

.half-hidden {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: -50px;
  width: 100px;

  border: 1px solid teal;
}

使用body作为容器

<div class="half-hidden"></div>

CSS

替换上面.container的body

为什么？

Answer 1

正如W3 官方文档和@Andy G 所说，没有溢出。在这种情况下，UA 将向第一个子级应用溢出：

UA 必须将根元素上设置的“溢出”属性应用到视口。当根元素是 HTML“HTML”元素或 XHTML“html”元素，并且该元素具有 HTML“BODY”元素或 XHTML“body”元素作为子元素时，用户代理必须改为应用“overflow”属性如果根元素上的值为“可见”，则从第一个此类子元素到视口。用于视口的“visible”值必须解释为“auto”。传播值的元素必须具有“visible”的“overflow”使用值。