位置的差异和影响:相对的，位置的:绝对的和浮动的

Question

有人能解释使用位置的区别:相对的，位置的:绝对的，浮动的，以及它对正常的文档流及其子项目的影响吗？

例如，当我有三项A，B，C，其中A是包含B和C的父项时，如果我设置A位置:相对位置，B位置:绝对，C位置:绝对，并将B和C同时浮动在左边。我发现B和C会互相重叠。但是，我希望它们按照A中包含的顺序排列，如果我简单地忽略C的位置:绝对，它们是按正确的顺序排列的。那么，谁能从这个简单的例子中总结出这三个因素的影响呢?而且，如果B和C都有子元素，那么它们会产生什么影响？(就像他们也会被排除在正常的文件流之外吗？)

Answer 1

Position:absolute和float不重合。如果你绝对定位一个元素，那么它就不再是“浮动”了。也就是说，绝对定位的项目(或固定的项目)被从文件流中取出。

通常情况下，最好是静态地或相对地放置事物，除非有必要。绝对定位有其用途，但一般不需要。

当您需要将子元素相对于父元素定位时，相对定位非常有用。因此，如果A是相对定位的，那么定位B绝对意味着它是基于A的位置放置的。

所以：

A {
    position:relative;
}

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

将在A的左上角放置B30‘s和左侧20’s。

在B内的任何位置，都将基于B的位置。如果B中有B1，则它将相对于B的位置放置，或者向左或向右浮动，或者绝对位于B内(除非它是位置:fixed，它总是相对于视图端口)。

这就是你想要的解释吗？