「要素{position:absolute;}親要素{position:absolute;}」と「要素{position:absolute;}親要素{position:relative;}」の違い

配置基準位置
・何れも親要素左上

違いが生じる理由
・「position:absolute;指定した要素」以降の要素は、「position:absolute;指定した要素」が存在しなかったものとして、配置される
・「position:absolute;指定した要素」のmarginは、他要素marginと相殺されない

---

要素{position:absolute;}親要素{position:relative;}

「親要素」配置基準位置
・「祖先要素」が存在しない場合の基準位置は、body要素左上

「親要素」配置位置
・他要素marginと相殺される

「子要素」配置基準位置
・親要素左上

「子要素」配置位置
・他要素marginと相殺される

「以降の要素」配置位置
・親要素は存在しているものとして配置

---

要素{position:absolute;}親要素{position:absolute;}

「親要素」配置基準位置
・「祖先要素」が存在しない場合の基準位置は、body要素左上

「親要素」配置位置
・他要素marginと相殺されない

「子要素」配置基準位置
・親要素左上

「子要素」配置位置
・他要素marginと相殺される

「以降の要素」配置位置
・親要素は存在していないものとして配置