3

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

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

4

2 回答 2

3

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

如果您没有指定绝对定位元素的宽度,或者如果您没有指定左右偏移量,那么宽度将被计算为类似于对表格单元格所做的缩小以适应宽度。

详细信息在 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/所示,那么块的计算宽度将小于页面的宽度。该块将根据需要在宽度和高度上扩展以容纳更多文本。

于 2013-06-27T17:38:20.443 回答
0

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

于 2013-06-27T18:15:07.753 回答