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;