Question

给出以下css

li.menuitem{
position:relative;
top:0;
left:20px;
display:inline;

我希望每个li的位置比没有位置相对的位置还要多20个像素。

然而，如果菜单项相对于左侧位置一起移动，则当我更改left的值时， all 会发生什么。换句话说，项目之间的空间不会改变。

虽然还有其他方法可以实现我想要的目标，但我很好奇为什么两个项目都会移动而且之间的距离不会改变。

谢谢， -dmd -

Answer 1

因为那是margin-left的用途。

这里有一个例子：如果你和我并排走路，我们都向前走了20步，你和我仍然是并排的。

同样，position: relative并未考虑其周围其他position: relative元素的新定位。它们都相对于它们自然的位置移动，而不是相对于现在其他元素的位置。

position: relative州的MDN entry：

此关键字列出所有元素，就像元素未定位一样，然后调整元素的位置，而不更改布局（从而为元素留下一个间隙，如果元素没有被定位的话）。