Question

我正在尝试自己学习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（就像我想要的那样）。为什么这样做？

提前致谢。

Answer 1

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

此外，position: relative的元素可以从该位置偏移，由顶部/底部/左/右参数定义。但是，为元素保留的空间仍然与没有position: relative的情况相同（但在您的情况下没有相关性），静态元素的高度为10px，之后下一个元素开始。由于下一个元素的position: relative和垂直偏移量为10px（由top: 10px设置定义），因此它的上边框显示在父元素开头下方20 px处{{1}在这种情况下）。

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

添加静态定位div

1 个答案: