CSS位置：相對 - 爲什麼頂部和底部不能取消對方？

Question

我剛開始學習CSS。我的理解position:relative可能是錯誤的...但我認爲：

1. top - 朝上方
2. left移動元素 - - 向右
移動元件向底部
3. bottom移動元素
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都是錯誤的，因爲您可以指定頂部，右側和底部的負值。因此，頂部/底部移動X軸上的元素，左/右移動Y軸上的元素。

二，則可以相對positionning閱讀：

如果沒有「左」和「右」是「自動」，位置是 過度約束，其中一個必須是忽略。如果包含塊的 'direction'屬性爲'ltr'，則 'left'的值爲'wins'，'right'爲''left''。 [...]

[源：w3.org section 9.4.3]

這意味着左側屬性優先在defautl方向（LTR）正確的屬性。頂部和底部相同，頂部優先於底部。

Answer 2

那麼，它需要在水平和垂直位置給出的最後一個參數。所以在你的情況下，它是「底部」和「左」。

Answer 3

對於相對定位的元素，top屬性將元素的頂邊 設置爲高於/低於其正常位置的單位。

問題是頂部取div，底部包括<h2>和<p>。