Css 为什么绝对定位的父元素宽度为零？

绝对定位允许您准确地将任何页面元素放置在您想要的位置。可以使用“定位”属性“顶部”、“左底部”和“右侧”来设置位置。这些值将相对于具有相对（或绝对）定位的下一个父元素。如果没有这样的父级，它将一直默认返回到元素本身，这意味着它将相对页面本身放置

下面是代码，其中绝对定位的子元素（

p

）将相对于下一个父元素（

div

），具有绝对定位，但

div

块宽度为零

<div  style= "position:absolute;">
    <p style = "position:absolute; top:4px; left:5px;">
        text text
    </p>
    <br/> <br/> <br/> <br/> <br/>
    <br/> <br/> <br/> <br/> <br/> 
</div>

<div style= "position:relative;">
    <p style = "position:absolute; top: 1px; left: 5px;">
        text text
    </p>
    <br/> <br/> <br/> <br/> <br/>
    <br/> <br/> <br/> <br/> <br/> 
</div>

---

在第一种情况下，为什么绝对定位的父元素（

div

）宽度为零？

绝对定位的元素不决定它们自己的宽度，它们需要定义。静态div自动

100%

宽，但一旦您定位它

absolute

，它就会丢失此宽度，转而使用预定义的宽度或默认的

0

。静态（和相对）元素将由其内容推动，但绝对元素不会。绝对定位元素不决定其自身的宽度，它们需要定义。静态div自动

100%

宽，但一旦您定位它

absolute

，它就会丢失此宽度，转而使用预定义的宽度或默认的

0

。静态（和相对）元素将由其内容推动，但绝对元素不会。

根据此处的规范：

在绝对定位模型中。。。从正常流量中移除 完全绝对定位框建立一个新的包含 正常流量子项和绝对流量块（但不是固定或页面） 定位子代

在您提供的示例中，

div

是绝对定位的，因此从正常流中删除。不仅如此，子体

p

也被绝对定位，因此也从流中移除，而且它的包含块由

div

建立

现在，从这里的规格：（强调我的）：

如果

左侧

、

宽度

和

右侧

三者都是

自动

：首先设置任何

自动

marginleft

和

marginright

到

0

的值。然后，如果

方向

建立静态位置的元素的属性，包含 块ltr设置为左静态位置，并应用规则编号 下面三个；否则，将右侧设置为静态位置并应用 下面的第一条规则

因此，在您的示例中，

左

、

右

和

宽度

在第三条规则适用的属性中不存在（忽略方向属性，到目前为止，规则1和规则3在宽度方面是相同的）

规则3规定（强调我国）：

如果

宽度

和

右侧

为

自动

，而

左侧

不是

自动

，则

宽度

为 收缩以适应。然后求解

右侧

当子

p

退出流时，还有什么可以导出

div

的宽度以使其收缩以适合？它唯一的文本内容是

中断

实际上，这将

div

压缩为

0

---

对于

div

中的

p

，同样的规则适用。它也会收缩以适应，但是它的包含块是由它的祖先

div

建立的（参见上面的第一个参考）。因此，它将在容器

div

的范围内收缩，以容纳尽可能多的内容

将此样式添加到

p

-

word break:break all

，您将看到

p

将缩小到一个宽度以容纳一个字符。

根据此处的规范：

在绝对定位模型中。。。从正常流量中移除 完全绝对定位框建立一个新的包含 正常流量子项和绝对流量块（但不是固定或页面） 定位子代

在您提供的示例中，

div

是绝对定位的，因此从正常流中删除。不仅如此，子体

p

也被绝对定位，因此也从流中移除，而且它的包含块由

div

建立

现在，从这里的规格：（强调我的）：

如果

左侧

、

宽度

和

右侧

三者都是

自动

：首先设置任何

自动

marginleft

和

marginright

到

0

的值。然后，如果

方向

建立静态位置的元素的属性，包含 块ltr设置为左静态位置，并应用规则编号 下面三个；否则，将右侧设置为静态位置并应用 下面的第一条规则

因此，在您的示例中，

左

、

右

和

宽度

在第三条规则适用的属性中不存在（忽略方向属性，到目前为止，规则1和规则3在宽度方面是相同的）

规则3规定（强调我国）：

如果

宽度

和

右侧

为

自动

，而

左侧

不是

自动

，则

宽度

为 收缩以适应。然后求解

右侧

当子

p

退出流时，还有什么可以导出

div

的宽度以使其收缩以适合？它唯一的文本内容是

中断

实际上，这将

div

压缩为

0

---

对于

p

中的

div