为什么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，这是它们的初始值。）