css - 相同的 CSS 在应用于 body 或 div 时表现不同

Question

Using a DIV as container

<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;
}

Using body as container

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

CSS

将上面的.container替换为body

为什么？

Answer 1

作为W3 Offical Doc说，@Andy G 也没有溢出。在这种情况下，UA 将对第一个 child 应用溢出:

UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'.