Как правильно использовать relative/absolute в css?

Question

[neulwert]

Я хочу разобраться в том как использовать комбо из relative и absolute. Я слышал, что нужно родительскому элементу давать position: relative;, а вложенному absolute.

У меня вопрос, что делать в том случае, если я хочу создать такой шаблон:
https://jsfiddle.net/z9mw3sn2/

Здесь три блока - #page, .navbar, .nav-items, каждый последний из которых вложен в предыдущий блок. Как мне быть, двум первым дать relative? Или двум последним дать absolute, ведь один человек сказал, что блок absolute вложенный в другой блок absolute - извращение, при этом я видел пример в интернете, где использовали такую практику. Я попробовал дать первым двум блокам relative, но они просто не работают, я им прописал ширину и высоту в процентах и прописал цвет бэкгрануда, но они не отображаются. Что делать если у меня много вложенных блоков? Что делать если их 3-4-5-...? Такого большого количества наверно стараются избегать, но каким способом и все же как быть если придется их использовать?

Comments

[Rustam Bainazarov]

Во-первых, аbsolute в absolute — не извращение, а необходимость, если она нужна.

Во-вторых, absolute тут вообще не нужен.

[Ankhena]

Начните с простого.
1. Зачем нужно или что делает абсолютное позиционирование?
2. Относительно чего позиционируются блоки с fixed, absolute, relative?

Что делать если у меня много вложенных блоков? Что делать если их 3-4-5-...?

На практике такое встречается очень редко.

В вашем примере абсолют не нужен вообще.
Нужен flex.

[neulwert]

Ankhena, у меня relative даже не работают, я ставил relative блоку background и width 100% - как итог не отображается цвет, скажите, пожалуйста, почему так происходит?

[Ankhena]

neulwert, Потому что height: 6%. А 6% от 0 это ноль. Блока просто не видно.

В этом примере вам вообще не нужен ни relative ни absolute.

[Ankhena]

neulwert,
https://jsfiddle.net/obz7pfvu/2/
Правда, не поняла затею с отступами у первого и последнего элементов списка. Почему у них он должен быть на 5px меньше. Ладно бы крайние отступы.

[neulwert]

Ankhena, Спасибо большое, насчет отступов - это я так баловался с раскраской)) Просто цвет бэкграунда как бы вылазит с двух сторон, вроде так нормально, но я попробовал изменить и получилось)

[Ankhena]

neulwert, изучайте flex и его свойство justify-content. Вас очень порадует.

[Варлам Ерофеич]

neulwert,

#page { /* уже работает */
    position: relative;
    width: 100%;
    height: 100vh; /* Здесь - единственное изменение исходного текста. */
    background: purple;
}

А не работало потому, что реальная высота нигде не была задана, height: 100%;, а сто процентов от неизвестной величины - это, пардон, "ундефинед"...

Answer 1

[Lord_Dantes]

Вопрос не корректный, не описана точная задача и цель использования, а лишь теория и отсутствие опыта у ТС.

Как правильно использовать relative/absolute в css?

По назначению.