爲什麼位置：相對使用頂部向下和向下移位？

Question

爲什麼CSS position: relative;使用bottom向上移位，使用top向下移位，left向右移位，right向左移位？

小提琴：我使用position: relative;不正確，或者這是某種形式的術語我是不知道的click me

是誰？

Answer 1

元件位於相對於它的正常位置，因此「左：20」，增加了20個像素元件的左側位置 find out more about the position property here (w3schools)

此外，還可以使用負數以及這樣來移動元件離開20像素你可以使用：

left:-20px 

Answer 2

這是一些「我不知道的術語」，用你自己的話來說。當您指定其中一個值時，您將指定距離該邊距遠離多遠。因此，例如，當您指定top:10px時，您的意思是「將它從頂部移動10px」。我認爲你只是誤解了你認爲它走向了這一邊，但它並不完全如此。這不僅僅是position:relative，它也是相同的absolute,fixed，和其他任何位置值有

Answer 3

它的工作正常。請閱讀此文章http://www.webdevdoor.com/html-css/css-position-child-div-parent，但請嘗試更改位置值例如：20,30,40 instead of 10

Answer 4

要了解這一點，首先讓我們看看position: relative屬性/值。

從w3schools直摘自：

與位置的元素：相對;相對於其正常位置定位。

設置相對定位元素的頂部屬性，右側屬性，底部屬性和左側屬性都會導致它從其正常位置調整遠離。其他內容將不會被調整以適應元素留下的任何空白。明白這一點

的一種方法是，當你設置像left屬性與定位relative元素，你設置的值是多遠遠從它的正常位置將是。所以，設置left有一個值20px將其移動20px遠離從它的正常left位置。一個正整數將把它移動到正確和負將移動到離開。 Fiddle

或者，通過W3Schools的最好把：

對於相對定位元素，左屬性設置元素的左邊緣到單元以左/右到其正常位置。

我上面的描述可能不是白話的正確，但它在一開始幫助我理解它。

Answer 5

簡單地說，它從指定的方向定位元素x的像素量。