Почему при абсолютном позиционировании padding родителя применяется только к 2 сторонам?

Question

[Senseich]

Всем привет! Иногда всплывают бональные, но почему то непонятные вопросы, хотя уже не новичок ))
Вот такой пример: https://jsfiddle.net/1aLb04bk/
Почему padding родителя сдвигает абсолютный элемент с двух сторон (сверху и слева), а не сжимает его со всех сторон?
Возможно я просто загнался, я так понимаю это особенность абсолютных элементов.

Answer 1

[Илья]

Абсолютное позиционирование у блочного элемента уже имеет ширину родителя и высоту согласно контенту внутри абсолютного блока. Если вы хотите задать высоту абсолютного блока равным родительскому, достаточно прописать height:100%; В вашем случае понадобится только задать позицию относительно родительского (просто прибить его к какому-либо краю, например через CSS position:absolute;left:0px; top:0px;) https://jsfiddle.net/1aLb04bk/1/

И забыл добавить. Абсолютный блок, он как бы не совсем находится физически внутри родителя relative. Он лишь наследует координаты родителя и далее в зависимости от высоты и привязки к краям родителя легко меняет высоту роста вверх или вниз, а при желании и ширину =) https://jsfiddle.net/1aLb04bk/2/ Старайтесь не использовать абсолют без крайней необходимости, особенно в эпоху флексбоксов.

Answer 2

[Andrej Sharapov]

Все верно, блок-2 cдвигается в сторону, относительно позиционирования родителя.
Кстати, использование padding совместно с width/height не рекомендуется. Поэтому, сейчас ваши блоки размером не 200px, а 220.

Comments

[Senseich]

Andrej Sharapov, ещё такой момент, получается для абсолютных элементов нужно обязательно задавать ширину и высоту? По идее это же блок и он должен растягиваться на ширину родителя, но если не указывать ширину, он просто не отображается.

Answer 3

[Senseich]

Абсолютное позиционирование у блочного элемента уже имеет ширину родителя и высоту согласно контенту внутри абсолютного блока. Если вы хотите задать высоту абсолютного блока равным родительскому, достаточно прописать height:100%;

По идее да, но если как вы пишите уже имеет ширину родителя, т.е. прописав только height:100% , элемент не отображается: https://jsfiddle.net/1aLb04bk/4/ , вот это мне интересно, почему без ширины он не отображается. Ведь блок должен растягиваться по определению на всю ширину контейнера в котором находится. Почему здесь этого не происходит? )