Существует ли родительская связь между абсолютным и относительным позиционированием в CSS?

Я новичок в мире кодирования, а также в CSS. Прочитав ряд статей относительно позиционирования relative и absolute, я понимаю следующее. Однако я не уверен, что позиция absolute должна быть дочерней родительской позицией relative или наоборот.

Есть 4 свойства позиции, то есть static, relative, absolute and fixed.
Если элемент имеет позицию relative, он все еще является частью обычного потока документа. Тем не менее, он имеет возможность смещаться по свойствам top, right, bottom and left.
Он также может иметь значение z-index и автоматически располагается над статическими элементами
Он также предоставляет метод, содержащий дочерние элементы, которые являются частью его кода, хотя я не уверен, что именно это означает.

Основываясь на этой информации, означает ли это, что элементы с позицией absolute должны быть дочерними элементами элементов с позицией relative или наоборот или это не имеет значения?

Если это не имеет значения, когда вы сделаете их зависимыми друг от друга, например. отношения родитель-ребенок?

Ответ 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 |     |
|     |     |
|     |     |
-------------

Итак, просто знайте, что всякий раз, когда вы используете абсолютное позиционирование, вы должны думать о том, каким будет ссылочный элемент в документе. И вы можете создать свою таблицу стилей, чтобы вы выбрали любой элемент ссылки, что делает абсолютное позиционирование очень полезной техникой макета.

Ответ 2

Абсолютное позиционирование относится к ближайшему предку с абсолютным, относительным или фиксированным позиционированием. Иногда полезно придавать относительное позиционирование элемента только для того, чтобы установить новый кадр ссылок для позиционирования своих детей с абсолютным позиционированием.

Ответ 3

Абсолютно позиционированный элемент всегда позиционируется относительно его расположенного предка. Если такой предок не существует, он будет помещен в область просмотра, которая может или не может быть корневым элементом "html" в зависимости от пользовательского агента/браузера. Родитель обязательно является предком, но предок не обязательно является родителем. Ребенок обязательно является декомпенсатом, но дежурный не обязательно является ребенком. Элементами с абсолютным положением могут быть дети или декодеры родителя, которые расположены относительно друг друга. Если они есть, они могут быть расположены по отношению к положению родителя, у которого alreday имеет положение как относительного, так и абсолютного. О, забудь об этом. Прочтите это

Positioning