Как сделать, чтобы контент был сзади шапки, если у контента position: absolute?

Question

[Олечка Макеева]

При прокрутке контент страницы пролистывается сверху шапки. А надо, чтобы фиксированная шапка всегда была сверху. Z - индекс не помогает, так как у контента абсолютное позиционирование. А как тогда?.....

Comments

[Максим]

А если абсолютному блоку задать з-индэкс ниже, получится?
И ваще является ли оправданным использовать для контента абсолюты?

[Dev-op]

Максим, 1. если абсолютно позиционированному элементу задать z-index меньше, чем у фиксированной шапки, это должно работать, но есть нюансы, при которых это не получится (надо учитывать стековый контекст).
2. нет так делать не стоит, плохая практика, которая добавляет сложностей в дальнейшем. Вопрос пользователя это одна из сложностей уже:)

[Dev-op]

Без кода сложно.
Пробуйте:
position: fixed
z-index: 999

1. отступ я думаю уже пробовали margin-top
2. Z - индекс не по поможет если элементы в разных стеках
3. Пробуйте JS для динамического изменения стилей при прокрутке

А вообще делайте по другому:)

[Сергей delphinpro]

Z - индекс не помогает, так как у контента абсолютное позиционирование.

Такого не может быть.
Возможно другое - вы не понимаете как работает z-index? и поэтому говорите, что он не помогает.

Показываю на примере

<div class=div1></div>
<div class=div2>
  <div class=div3></div>
</div>

.div1 { z-index: 2 }
.div2 { z-index: 1 }
.div3 { z-index: 1000000000000 } // хоть миллиард поставь, но он не встанет выше родителя.

Answer 1

[Нар Зантария]

Не совсем понятен вопрос, - не хватает деталей. Но исходя из сказанного, возможно вам нужно и контент обернуть в контейнер, у которого будет фиксированная позиция и свойство "overflow-y: scroll". Полосу прокрутки можно скрыть с помощью "scrollbar-width: none;" z-index контейнера сделать меньше, чем у шапки, тогда она будет наверху. Если правильно понял вопрос.

Answer 2

[Олечка Макеева]

Всем спасибо!!! Жестко затупила, но вы помогли разобраться. Z-индекс всё же работает, просто я невнимательная :))