爲什麼在這個例子中CSS相對定位不正確？

Question

我正在做一些CSS定位測試，我注意到一個奇怪的行爲。

比方說，我有一個絕對定位的容器div（紅色）。在這個div裏面，我想放置兩個塊（綠色和藍色），以及與容器的相對位置。這些塊應該堅持到頂部，讓他們之間的50個像素的距離，如下面

所以我想我應該用top:0px; left:0px;的第一個，放置他靠近左上角。我爲這個間距增加了50的寬度，我得到了第二個塊的top:0px; left: 100px;。 （jsfiddle here）。

不是看到預期的行爲，我得到這個定位

看來第二塊有top相對於第一塊，而不是父容器。因此，第二個區塊的正確CSS代碼應爲top: -50px; left: 100px;，如this小提琴。

這不是我第一次注意到這個。在某些情況下，left屬性是有問題的，在這種情況下，它是top。

反正我知道如何解決這些問題，並得到正確的顯示，但我不明白爲什麼是它不喜歡的工作，我認爲它應該。

這很可能是我誤解了這個絕對/相對定位的一些東西，但我不知道它是什麼。

Answer 1

第二個塊的top和left相對於本身，而不是第一個塊或父容器。

當你定位一些相對的東西時，它的偏移值將會偏離它在應用相對定位之前的原始位置。偏移量從來不是基於它的兄弟姐妹，祖先或後代的位置（除非它們是auto，這是它們的初始值）。