html - overflow:hidden 不剪辑绝对定位的内容

Question

我正在尝试制作一个内部带有滚动文本的框。问题是，当文本位于框的中间位置时，当我希望它被剪裁时它显示在框的外面。

HTML/CSS 非常简单，我不知道哪里出了问题:

#vbox {
  width: 100px;
  height: 500px;
  overflow: hidden;
  background: #afa;
}
#vtext {
  position: absolute;
  width: 100px;
  top: 250px;
}

<div id="vbox">
  <div id="vtext">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
    <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
    <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
    <p>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
  </div>
</div>

不是“溢出:隐藏；”应该 overflow hidden 的内容？

编辑:

在框中添加“postion:relative”解决了问题，但我仍然感到困惑...有人可以解释这种行为吗？

Answer 1

如果具有该设置的元素不是(或不包含)其包含 block (通常，这意味着它未定位)，则绝对定位元素不受任何 overflow 设置的影响。

在您的情况下，框未定位，因此文本锚定到视口(viewport)而不是框。该框不知道文本，并且视口(viewport)足够大以包含文本，因此根本不会发生裁剪。您可以在 section 11.1 中找到血淋淋的详细信息规范。

给你的盒子 position: relative 将导致文本相对于盒子定位，并因此被剪裁。

#vbox {
  position: relative;
  width: 100px;
  height: 500px;
  overflow: hidden;
  background: #afa;
}
#vtext {
  position: absolute;
  width: 100px;
  top: 250px;
}

<div id="vbox">
  <div id="vtext">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
    <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
    <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
    <p>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
  </div>
</div>