Question

<style type="text/css">
.a {
 border: 1px solid #000;
 position: relative;
}

.b {
 background: #F93;
 position: absolute;
 top: 50px;
 left: 50px;
}
</style>
<div class="a">
  <div class="b">test</div>
</div>

a的高度不会随着它的内容自动调整（因为b有流量），但是如何解决这个问题，可以使用css，而不是javascript。

Answer 1

如果你期望看到你的a-div调整大小，那么我认为你误解了一些东西。当您将元素设置为绝对元素时，您将其从“渲染流程”中取出，这意味着它不会干扰页面上的任何其他元素。

Answer 2

在绝对定位模型中，框相对于其包含块明确偏移。它完全从正常流程中移除（它对后来的兄弟姐妹没有影响）。绝对定位的框为正常流动子项和绝对（但不是固定）定位后代建立新的包含块。但是，绝对定位元素的内容不会围绕任何其他框流动。它们可能会遮挡另一个盒子的内容（或自身被遮挡），具体取决于重叠盒子的堆叠级别。

您会看到以下文档：Absolute positioning

Answer 3

当你有一个位置为相对的Div时，你可以控制里面的任何绝对元素。实际上，绝对Div超出了正常文档的流程，如上面提到的 Greg 。我看到你为b设置了left和top，然后如果你将a的宽度设置为60px。您的<div class="b">位于父框之外。这是绝对元素的工作方式。

Answer 4

尝试“float：left;”在这两个班级。但是，没有测试。您正在测试浏览器吗？

Answer 5

如果div b定位为绝对值，则不再将其视为“在a内”，因为它不会在其中呈现。

所以div不会随着div变大或变小而调整大小...

Answer 6

通过设置position: absolute，您将div放在正常文档流之外，这就是容器不会调整大小以包含它的原因。

您想要设置margin-top: 50px; margin-left: 50px;吗？

Div不会使用绝对内容div自动调整大小

6 个答案: