当我添加静态定位的 div 时，相对定位的 div 移动

【问题标题】：Relative positioned div moves when I add static positioned div当我添加静态定位的 div 时，相对定位的 div 移动
【发布时间】：2017-11-01 00:41:32
【问题描述】：

我正在尝试自学 CSS，但我不明白相对定位的工作原理。当我添加静态定位 div 时，我的相对定位 div 移动到不同的位置。

<!DOCTYPE html>
<html>
<head>
<style>
div#static, div#relative {
    height:10px;
    width: 10px;
}

div#static {
    background: red;
    position: static;
}

div#relative {
    background: green;
    position: relative;
    top: 10px;
    left: 10px;
}
</style>
</head>
<body>

<div id=static>
</div>

<div id=relative>
</div>

</body>
</html>

当我应用此代码时，以相对位置定位的 div 从其正常位置向左移动 10px，但向底部移动 20px。当我只放置一个具有相对位置的 div 时，它会向左和底部移动 10px（就像我想要的那样）。为什么会这样？

提前致谢。

【问题讨论】：

标签： css css-position

【解决方案1】：

position: relative 和 position: static（这是默认值，顺便说一句，因此任何没有 position 定义的元素都是静态的）意味着元素根据它们的设置（高度）排列在所有元素的流中，宽度，内容），按照它们出现的顺序。

此外，带有position: relative 的元素可以与该位置有一个偏移量，由 top/bottom/left/right 参数定义。然而，为元素保留的空间仍然与没有position: relative 的情况相同（但这与您的情况无关），静态元素占用 10px 高度，之后下一个元素开始。由于下一个元素有position: relative 和10px 的垂直偏移（由top: 10px 设置定义），它的上边框出现在父元素开头下方20 px（在本例中为body）。

注意：如果你在此之后添加另一个元素，它将被相对定位的元素垂直重叠（由于它的 10px 垂直偏移，即top: 10px）

【讨论】：