Зачем родителю указывать position: relative?

Question

[EYPPNM]

Зачем родителю указывать position: relative, если можно это сразу элементу указать, вроде визуально нет разницы?

P.S. Круг внутри прямоугольника

Answer 1

[Антон Швец]

relative не мешает никому вылезать за границы. https://jsfiddle.net/melchiorio/kxLwubz0/
не понимаю, зачем люди пишут некорректные ответы.
position: absolute выдергивает элемент из потока и позволяет задать этому элементу координаты, которые считаются от границы окна, ИЛИ от границы родительского элемента, в том случае, если у родительского position в значении absolute, relative или fixed.

Answer 2

[Gran Torino]

В одних случаях визуально нет разницы, в других будет. absolute выдергивает из потока, как уже сказали, relative же нет.

Comments

[EYPPNM]

читал в интернете бегло, что ещё разница в какойто отправной точке

[Gran Torino]

EYPPNM, ну да, absolute позиционируется от ближайшего родителя с позиционированием отличным от static, relative же позиционируется относительно самого себя.

[EYPPNM]

Gran Torino,

relative же позиционируется относительно самого себя

в смысле относительно "самого себя"?

[Gran Torino]

EYPPNM,

[EYPPNM]

Gran Torino, вспомнил, спасибо, оно оставляет зарезервированное место от себя, но "парит" на другими элементами, ещё раз спасибо, что помогли закрепить знания

Answer 3

[Кирилл Конторович]

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

Comments

[EYPPNM]

попробовал выставить position: relative элементу внутри и тоже за границы ничего не выскочило

[Rustam Bainazarov]

EYPPNM, потому что у вас нет никакого другого окружения, кроме body.

[EYPPNM]

Рустам Байназаров, ааа вот оно что, спасибо!

[Кирилл Конторович]

EYPPNM, А теперь возьмите и сделайте подобное

<div style="width: 600px; height: 600px;"> 
    <div style="width:300px; height: 300px; position:relative;"> 
          <div style="position:absolute; top: 0;width:50px:height:50px"></div>
    </div>
    <div style="width:300px; height: 300px;">
          <div style="position:absolute; top: 0;width:50px:height:50px"></div>
    </div>  
</div>