Ответ 1
На самом деле отношения между родителями и дочерними элементами отсутствуют.
Относительное позиционирование не имеет ничего общего с абсолютным позиционированием. Относительное позиционирование - это то же самое, что и обычное статическое позиционирование, за исключением того, что оно может быть смещено вверху/справа/внизу/слева, как вы объясните. Значения "верхний/правый/нижний/левый" относятся к тому, где элемент обычно существует в потоке. Если вы не учитываете эти значения, элемент все еще относительно расположен, но он расположен точно так, как если бы он был статически расположен.
OTOH, когда вы используете абсолютное позиционирование, "материальные" элементы абсолютно позиционированного элемента имеют значение.
Это объясняется тем, что объясняет ответ LaC. При абсолютном позиционировании значения "верхний/правый/нижний/левый" относятся к тому, что ближайший родительский элемент имеет абсолютное, относительное или фиксированное позиционирование. Я назову это "ссылочным элементом".
Рассмотрим этот фрагмент примера:
<body>
<div style="width: 50%;">
<p style="position: absolute; width: 20px; top: 0; right: 0">P</p>
</div>
</body>
Div будет выровнен по левому краю, статическому (нормальному, в потоке документа), 50% ширине тела. В правом верхнем углу окна просмотра будет p-ширина 20px.
-------------
| | |P|
| | --|
| div | |
| | |
| | |
-------------
Видовой порт является ссылочным элементом, потому что нет других родительских элементов p, которые имеют абсолютное/фиксированное/относительное позиционирование.
Теперь измените div, который будет расположен относительно:
<body>
<div style="position: relative; width: 50%;">
<p style="position: absolute; width: 20px; top: 0; right: 0">P</p>
</div>
</body>
Div будет выглядеть точно так же, как и раньше, потому что не указано ни одно из верхних/правых/нижних/левых смещений. Однако позиция p будет меняться, даже если ее стиль не имеет.
Это связано с тем, что раньше p был выровнен в верхнем правом углу окна просмотра, но теперь есть более близкий родительский элемент (div) с абсолютным/фиксированным/относительным позиционированием. Итак, теперь div становится ссылочным элементом, а p будет выровнен в верхнем правом углу:
-------------
| |P| |
| --| |
| div | |
| | |
| | |
-------------
Итак, просто знайте, что всякий раз, когда вы используете абсолютное позиционирование, вы должны думать о том, каким будет ссылочный элемент в документе. И вы можете создать свою таблицу стилей, чтобы вы выбрали любой элемент ссылки, что делает абсолютное позиционирование очень полезной техникой макета.