使用position:absolute时压缩文本;

时间:2013-06-27 17:08:28

标签: css

我有一个文本框,当我不使用position:absolute;时会在屏幕上展开,但是在使用它时,每个单词的文本都在一列中,并且该框非常小。

造成这种情况的原因是什么?或者是什么导致这个?我一直在尝试溢出设置,不同类型的位置和z索引等。

2 个答案:

答案 0 :(得分:1)

这是一个很好的问题,因为它突出了绝对定位元素的一个重要方面。

如果未指定绝对定位元素的宽度,或者未指定左右偏移,则宽度计算为缩小到适合宽度,类似于为表格细胞。

详细信息在CSS规范第10章中给出:http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width

当您放置一个绝对定位的元素以使其触发溢出条件或其中一个边缘超出视口时,也会产生一些微妙的后果。在这些情况下,绝对定位的块的计算宽度可能小于您指定的宽度。

关键是要考虑块将包含的内容类型和内容,并为设置宽度提供明确的约束,或者使用相对值的固定值。

示例

如果您绝对定位以下内容:

<div class="abs ex3"><b>Small amount of text:</b> shrink-to-fit</div>

http://jsfiddle.net/audetwebdesign/SHxPR/所示,然后计算出的块宽度将小于页面的宽度。块将根据需要在宽度和高度上扩展以容纳更多文本。

答案 1 :(得分:0)

您拥有position:absolute;的元素正在按预期执行。对于这个绝对定位的元素,您应该使用position:relative;到父容器。