CSS 位置 :relative - why are top and bottom not cancelling each other?

Question

我刚开始学习 CSS。我对position:relative的理解可能是错的......但我认为:

1. top - 将元素移到底部
2. bottom - 将元素移到顶部
3. left - 向右移动元素
4. right - 向左移动元素

因此，我尝试了下面给出的代码(从 w3schools 复制)，看看 top 的值是否相等/bottom/left/right会有效地抵消个别运动，并将元素保持在其原始位置，但它没有用。该元素似乎已移至其原始位置的“右下角”。

这里究竟发生了什么？这些运动没有被抵消是有原因的吗？这是 JSFiddle 上的相同代码, 以及输出。

div.relative {
  position: relative;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
  border: 3px solid #73AD21;
}

<h2>position: relative;</h2>
<p>An element with position: relative; is positioned relative to its normal position:</p>
<div class="relative">This div element has position: relative;</div>
<p>abcd</p>

Answer 1

首先，陈述 1、2、3 和 4 是错误的，因为您可以为 top、right left 和 bottom 指定负值。因此，top/bottom 可以在 X 轴上移动元素，Left/right 可以在 Y 轴上移动它。

其次，你可以阅读相对定位:

If neither 'left' nor 'right' is 'auto', the position is over-constrained, and one of them has to be ignored. If the 'direction' property of the containing block is 'ltr', the value of 'left' wins and 'right' becomes -'left'. [...]

[source: w3.org section 9.4.3 ]

这意味着左侧属性在默认方向 (ltr) 上优先于右侧属性。顶部和底部相同，顶部优先于底部。