Как сделать, чтобы контент был сзади шапки, если у контента position: absolute?
При прокрутке контент страницы пролистывается сверху шапки. А надо, чтобы фиксированная шапка всегда была сверху. Z - индекс не помогает, так как у контента абсолютное позиционирование. А как тогда?.....
Дополнительно:
А если абсолютному блоку задать з-индэкс ниже, получится?
И ваще является ли оправданным использовать для контента абсолюты?
2. нет так делать не стоит, плохая практика, которая добавляет сложностей в дальнейшем. Вопрос пользователя это одна из сложностей уже:)
Пробуйте:
position: fixed
z-index: 999
1. отступ я думаю уже пробовали margin-top
2. Z - индекс не по поможет если элементы в разных стеках
3. Пробуйте JS для динамического изменения стилей при прокрутке
А вообще делайте по другому:)
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 } // хоть миллиард поставь, но он не встанет выше родителя. |
<div class=div1></div> <div class=div2> <div class=div3></div> </div> .div1 { z-index: 2 } .div2 { z-index: 1 } .div3 { z-index: 1000000000000 } // хоть миллиард поставь, но он не встанет выше родителя.
Не совсем понятен вопрос, - не хватает деталей. Но исходя из сказанного, возможно вам нужно и контент обернуть в контейнер, у которого будет фиксированная позиция и свойство "overflow-y: scroll". Полосу прокрутки можно скрыть с помощью "scrollbar-width: none;" z-index контейнера сделать меньше, чем у шапки, тогда она будет наверху. Если правильно понял вопрос.
Ответы:
Всем спасибо!!! Жестко затупила, но вы помогли разобраться. Z-индекс всё же работает, просто я невнимательная :))
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сделать контент находящийся внутри элемента с абсолютным позиционированием (position: absolute) находился за шапкой, можно использовать свойство z-index.
Например, если у вас есть шапка с фиксированным позиционированием (position: fixed), а контент с абсолютным позиционированием (position: absolute), вы можете установить для шапки z-index больше, чем у контента, чтобы контент оказался за шапкой.
Пример для HTML и CSS:
<title>Content behind header</title> <header class="header">Header</header> <div class="content">Content behind header</div>
.header { position: fixed; top: 0; left: 0; width: 100%; background-color: #333; color: #fff; padding: 10px; z-index: 1000; /* устанавливаем z-index для шапки */ } .content { position: absolute; top: 50px; /* высота шапки */ left: 0; width: 100%; background-color: #f9f9f9; padding: 20px; z-index: 999; /* устанавливаем z-index для контента */ }
В данном примере шапка будет находиться над контентом из-за большего значения z-index. Таким образом, контент будет отображаться за шапкой, даже если он имеет абсолютное позиционирование. Не забудьте подстроить значения z-index под ваш макет и стили.