Что означает «позиция: относительная» на самом деле?

Question

w3.org/TR/CSS2says:

Для других элементов, если позиция элемента является «относительно» или «статической», содержащий блок формируется краем содержимого ближайшего предка коробки блока контейнера.

Что это значит? Я прочитал его как position: relative не влияет на сам элемент, но на самом деле влияет на его родителя - содержащий блок.

Итак, чтобы сменить CSS содержащего блока, должен ли я применить position к его ребенку?

Разве это не странно? Существует шаблон, когда вы применяете position: relative к родительскому объекту, а position: absolute - к некоторому из его дочерних элементов, чтобы сделать абсолютно позиционированного ребенка привязанным к родительскому.

Answer 1

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

h1 дается следующий CSS:

h1 { 
    position: relative; 
    top: 20px; 
    left: 20px; 
} 

, то он будет двигаться 20px сверху и слева от своей первоначальной позиции. Проверьте мою скрипту: https://jsfiddle.net/w6sowku5/

Answer 2

... на самом деле влияет на ее родительский элемент - содержащий блок.

Точка

... если позиция элемента является «относительно» или «статическое», то блок, содержащий образован краем содержимого ближайшего блока контейнера предка коробки.

должен объяснить, что его родительский элемент не обязательно является его содержащим блоком.

В частности, если она position:relative и его родитель display:inline, то его родитель не его содержащий блок, а элемент далее вверх по дереву DOM вместо этого.