绝对位置影响宽度？答案

【问题标题】：absolute position affects width?绝对位置影响宽度？
【发布时间】：2018-04-26 16:40:21
【问题描述】：

我是 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>

【问题讨论】：

你在实际代码中对 div 应用了宽度和高度吗？
将位置更改为绝对会触发block formatting context。
XTG，没有其他代码了。
您可以在该主题上查看answer here：

标签： css position width absolute

【解决方案1】：

因为绝对定位的元素不表现为块级元素，并且不会像正常的 a<div>does 那样彼此流动。

您需要为绝对定位的 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>

【讨论】：

对不起，我还是听不懂任何回复。定位不意味着放置元素的位置，那么为什么它会影响宽度？
如果您的元素是块级元素，那么它将根据其内容填充父元素。因此，如果您在普通 div 中有大量段落文本，则段落文本将根据您的 CSS 样式决定 div 的大小。绝对定位不是块级的，所以它不会那样做。
引用的文字似乎是虚构的。没有提供引用，文本没有出现在其他任何地方（至少没有出现在网络上），就此而言，前半部分显然是错误的。 spec 非常清楚地表明，abposed 元素是块级的。
我对同样的问题感到困惑。感谢您提供更好的说明。同样的场景也适用于 "Position: fixed" ？我在尝试将位置属性更改为 fixed 时发现了相同的行为。
@BoltClock 你关闭了stackoverflow.com/questions/31398209/…，这不是一个有效的问题吗？

【解决方案2】：

因为你给定绝对位置的元素从他的父元素那里取了宽度，并且没有表现得像块元素。

【讨论】：

它从内容中获取宽度和高度。并且仅当内容相对定位时。

【解决方案3】：

就像 SMacFadyen 所说，最可能的原因是在container 中缺少相对位置。但是，如果container 处于相对位置且宽度较小且inner 内容为绝对位置，则当您使用左或右定位内部内容时，其内容可能会分成多行。在这种情况下，您需要将 white-space property 更改为 nowrap 或其他更适合您需求的选项。

【讨论】：