绝对位置影响宽度？

Question

我是CSS新手。我想知道为什么当我将 div 元素的位置更改为绝对位置时，div 元素的宽度会发生变化？在 Chrome v25.0.1364.172m 和 IE9 中尝试过，结果相同。

简单的例子：

div {
  position: relative;
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

<div>test</div>

Answer 1

因为绝对定位的元素不具有块级别的行为 元素并且不会像正常的 a

<div>

那样相互流动。

您需要为绝对定位的 div 设置宽度和高度，具体取决于它包含的内容。

您的绝对定位元素将相对于它所在的第一个父元素进行定位。因此，一个简单的示例：

一个简单的“问题”是没有将父元素设置为具有

position: relative;

<!-- I'm a parent element -->
<div style="width: 500px; height: 500px; position: relative; border: 1px solid blue;">

    <!-- I'm a child of the above parent element -->
    <div style="width: 150px; height: 150px; position: absolute; left: 10px; top: 10px; border: 1px solid red;">
         I'm positioned absolutely to my parent. 
    </div>

</div>

Answer 2

就像 SMacFadyen 所说，最可能的原因是缺少

container

中的相对位置。 但是，如果

container

处于相对位置且宽度较小，并且

inner

内容处于绝对位置，则当您使用向左或向右定位内部内容时，其内容可能会分成多行。在这种情况下，您需要将

white-space

属性 更改为

nowrap

或其他更适合您需求的选项。

Answer 3

因为您赋予绝对位置的元素会从其父级获取宽度，并且不会表现为块元素。