css - position :relative, position :absolute,与float的区别及影响

Question

谁能解释一下使用 position:relative、position:absolute 和 float 对正常文档流及其子项的影响的区别？

例如当我有三个元素 A、B、C 时，其中 A 是包含 B 和 C 的父项。如果我将 A position:relative，B position:absolute，C position:absolute，并将 B 和 C 都 float 到其左侧。我发现 B 和 C 会相互重叠。但是我希望它们按包含在 A 中的连续顺序放置。如果我简单地忽略 C 的position:absolute，它们将按正确的顺序放置。那么谁能从这个简单的案例中总结出这三者的影响，更进一步，如果B和C都有子元素，它们会产生什么影响呢？ (比如它们也会从正常的文档流中删除吗？)

Answer 1

Position:absolute 和 float 不重合。如果你绝对定位一个元素，那么它就不再是“ float 的”。即绝对定位的元素(或固定元素)从文档流中取出。

除非必要，否则通常最好静态或相对地定位事物。绝对定位有其用途，但通常不需要。

当您需要将子元素相对于父元素定位时，相对定位很有用。相对。所以如果A是相对定位，那么绝对定位B就是根据A的位置来定位。

所以:

A {
    position:relative;
}

B {
    position:absolute;
    top:30px;
    left:20px;
}

将 B 放置在距离 A 的左上角顶部 30px 和左侧 20px 处。

然后在 B 中定位的任何内容都将基于 B 的位置。如果 B 内有 B1，它将相对于 B 的位置放置，向左或向右浮动，或者绝对定位在 B 内(除非它是 position:fixed，它始终相对于视口(viewport))。

这是您想要的那种解释吗？