overflow：hidden不会剪辑绝对定位的内容 [英] overflow:hidden does not clip absolute positioned content

问题描述

我正在尝试制作一个包含滚动文字的框。问题是，当文本在文本框的一半时，它会在我希望它被剪辑时显示在外面。

HTML / CSS非常简单，我没有线索可能会出错：

#vbox {width：100px;身高：500px;溢出：隐藏;背景：#afa;}＃vtext {position：absolute;宽度：100px;

溢出：隐藏;是否隐藏溢出内容？

编辑：

相对的问题解决了这个问题，但我仍然困惑......有人可以解释这种行为吗？

解决方案

绝对 - 如果具有该设置的元素不包含（或不包含）其包含的块（通常，这意味着它没有定位），那么定位元素不会受到任何 overflow 设置的影响。

在您的情况下，该框未定位，因此文本将锚定到视口而不是框。该框不知道文本，并且视口足够大以包含文本，因此根本不发生剪切。您可以在规格的第11.1节中找到血淋淋的细节。

给出您的方格 position：relative 将导致文本相对于方框被定位，并被裁剪为一个结果。

#vbox {position：relative;宽度：100px;身高：500px;溢出：隐藏;背景：#afa;}＃vtext {position：absolute;宽度：100px;