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>

不是"溢出:隐藏;" 是否隐藏了溢出的内容？

编辑:

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

Answer 1

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

在您的情况下,框未定位,因此文本将锚定到视口而不是框.该框不知道文本,视口大到足以包含文本,因此根本不会发生剪切.您可以在规范的第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>