Как правильно позиионировать в CSS?

Question

[Капитан Какао]

Всем привет.
В двух словах есть вид материалов. В низу есть кнопка "далее"
Она должна находится внизу блока в правом углу.
Макет резиновый + адаптивный (если бы не это всё было бы проще).

В общем для кнокпи "далее" прописал такой код

.post-read {width:92%;height:50px;padding:0 4%;position:absolute;bottom:10px;right:4%;}

Вся соль в position:absolute;bottom:10px;right:4%;

По моей логике, отступ должен быть с низу блока в который завёрнут .post-read 10px и с права 4%.
НО, он делает отступ не от блока в который обёрнут .post-read, а от тела.
В итоге все кнопки сбиваются в правом нижнем углу сайта.

Вот пример.
jsfiddle.net/q1f2yrm5

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

Помогите разобраться и решить проблему.

Answer 1

[Денис Атясов]

.post {position: relative;}

Comments

[Капитан Какао]

Спасибо большое!)

Answer 2

[Андрей Федоров]

Это так задумано.
Чтобы сделать отступ от границ родителя, родителю нужно дать position: relative. Если это не задано, но по умолчанию position: relative дается body.

Comments

[Капитан Какао]

Большое спасибо!)