Question

任何人都可以解释使用位置的差异：relative，position：absolute和float对普通文档流及其子项的影响？

e.g。当我有三个项目A，B，C，其中A是包含B和C的父项。如果我使A位置：相对，B位置：绝对，C位置：绝对，并且将B和C浮动到其左侧。我发现B和C会相互重叠。但是我希望它们按照A中包含的顺序排列。如果我只是忽略C的位置：绝对，它们按正确的顺序排列。因此，任何人都可以在这个简单的案例中总结这三者的影响，而且，如果B和C都有子元素，它们会产生什么影响？（他们也会从正常的文件流中取出吗？）

Answer 1

Position:absolute和float不一致。如果你绝对定位一个元素，那么它就不再“浮动”了。即绝对定位的物品（或固定物品）从文件的流程中取出。

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

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

所以：

A {
    position:relative;
}

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

将B从顶部放置30px，从A的左上角放置20px。

然后定位在B内的任何东西都将基于B的位置。如果B内有B1，它将相对于B的位置放置，向左或向右浮动，或绝对位于B内（除非它是位置：固定，总是相对于视口）。

这是你追求的那种解释吗？

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

1 个答案: