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

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一样，并没有溢出。在这种情况下，UAs将向第一个孩子应用溢出：

  

UA必须应用＆＃39;溢出＆＃39;属性设置在根元素上   视。当根元素是HTML＆＃34; HTML＆＃34;元素或XHTML   ＆＃34; HTML＆＃34;元素，该元素有一个HTML＆＃34; BODY＆＃34;元素或   XHTML＆＃34; body＆＃34;作为孩子的元素，用户代理必须改为应用   ＆＃39;溢出＆＃39;从第一个这样的子元素到视口的属性，   如果根元素上的值是“可见的”。可见＆＃39;值   用于视口时，必须解释为＆＃39; auto＆＃39;。元素   传播值必须具有使用的值   ＆＃39;溢出＆＃39; ＆＃39;可见＆＃39;。

Answer 2

嗨朋友们在你的代码中添加这个css

.container {
  margin: 20px auto 0;
  width: 200px;
  height: 200px;
  border: 1px solid red;
  overflow: hidden;
  right:-100px;
}

.half-hidden {
  position: absolute;
  top: 30px;
  bottom: 30px;
  width: 100px;
  border: 1px solid teal;
  float:left;
  margin-left:-50px
}

<强> HTML

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