我是 CSS 新手。我想知道为什么当我将div元素的定位更改为绝对时，div元素的宽度会发生变化？在 Chrome v25.0.1364.172m 和 IE9 中试用，结果相同。
简单的例子：
<!doctype html/>
<html>
<head>
<title>test</title>
<style>
div {
position:relative;
border-width: 1px;
border-style: solid;
border-color: black;
}
</style>
</head>
<body>
<div>test</div>
</body>
</html>
因为绝对定位的元素不像块级元素那样表现，也不会像正常的 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>
就像 SMacFadyen 所说，最可能的原因是container. 但是，如果container在相对位置且宽度较小且inner内容为绝对值，则当您使用左或右定位内部内容时，其内容可能会分成多行。在这种情况下，您需要将white-space属性更改为nowrap更适合您需求的其他选项。
因为你给定绝对位置的元素从他的父元素中获取宽度并且没有表现得像块元素。