为什么不是'；在本例中，CSS相对定位是否正常工作？

我正在做一些CSS定位测试，我注意到一个奇怪的行为

假设我有一个绝对定位的容器div（红色）。在这个div中，我想放置两个块（绿色和蓝色），它们相对于容器的位置。这些块应该贴在顶部，它们之间的距离为50像素，如下所示

所以我想我应该使用

top:0px；左：0px对于第一个，将其放置在左上角附近。我给它的宽度加上50作为间隔，得到
top:0px；左：100px用于第二个块。（jsfiddle）

我没有看到预期的行为，而是得到了这样的定位


似乎第二个块相对于第一个块而不是父容器具有其
顶部
。因此，第二个块的正确CSS代码应该是
top:-50px；左：100px，就像小提琴一样

这不是我第一次注意到这一点。在某些情况下，
left
属性是出现故障的属性，在本例中是
top

无论如何，我知道如何解决这些问题并获得正确的显示，但我不明白为什么它不能像我认为的那样工作

很可能我误解了整个绝对/相对定位，但我不知道它是什么。
第二个块有它的
顶部
和
左侧
相对于自身，而不是第一个块或父容器

当您相对定位某个对象时，其偏移值会将其从应用相对定位之前的原始位置向这些方向移动。偏移永远不会基于其同级、祖先或后代的位置（除非它们是
自动的
，这是它们的初始值）。
第二个块具有其相对于自身的
顶部
和
左侧
，而不是第一个块或父容器

当您相对定位某个对象时，其偏移值会将其从应用相对定位之前的原始位置向这些方向移动。偏移量从不基于其兄弟、祖先或后代的位置（除非它们是
auto
，这是它们的初始值）。
还应注意，将
relative
更改为
absolute
将解决这种情况下的问题，因为父代已经有了定位（）。啊，我现在明白了！谢谢你的回答，我将在7分钟内接受。还应注意，将
相对
更改为
绝对
将解决本例中的问题，因为家长已经有定位（）。啊，我现在明白了！谢谢你的回答，我会在7分钟内接受