Question

为什么绝对定位的元素依赖于其父文本包装？ position: absolute不从流中删除元素吗？

Why does this text wrap around, even though this container has been removed from the flow of its parent?

我想要删除这个边界。这就像我不想要的隐含max-width;我希望其他开发人员能够设置此max-width，而不用担心这种任意限制。如何删除此行为？

Answer 1

position: absolute不从流中删除元素吗？

这与流量无关。元素的宽度始终遵循其包含块。如果元素是绝对定位的，那么它的维度可以由top，right，bottom和left约束，但只要其width为{ {1}}然后它仍然必须被约束到其包含块的宽度（在这方面与流入块框没有区别），在你的情况下它是绝对定位的父类。没有任何其他元素的约束，绝对定位的元素可以在不损害其文本流量的情况下自行调整大小。

有关如何计算此宽度的详细信息，请参阅spec。

Answer 2

试试这个：

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="absolute-parent">
    <div id="absolute-child">
      Why does this text wrap around, even though this container has been removed from the flow of its parent?
    </absolute-child>
  </absolute-parent>
</body>
</html>

CSS

body * {
  outline: 1px solid black;
}
#absolute-child {
  position: absolute;
  left: 100px;
  top: 40px;
}
#absolute-parent {
  /*position: relative;
  left: 100px;
  top: 100px;*/
  width: 200px;
  height: 100px;
  border: 1px solid black;
}

我从absoluet父元素中删除了定位，并将其和子元素转换为带有id的div。

为什么绝对位置元素基于其父权限进行换行？

2 个答案: