Почему div находится под header'ом?
Учусь верстать и не могу понять, почему div отображается под header'ом
Вот код:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Cascade Shop</title> <link rel="stylesheet" href='/static/style.css' /> </head> <body> <header> <div class="logo-text">Cascaded</div> <nav class="navbar"> <div class="faq-button">FAQ</div> <div class="telegram-button">Telegram</div> </nav> <a class="support-button">Связаться</a> </header> <div class="title-box"> <div class="title">Магазин подписок<br>Супер Пупер</div> </div> </body> </html> |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Cascade Shop</title> <link rel="stylesheet" href='/static/style.css' /> </head> <body> <header> <div class="logo-text">Cascaded</div> <nav class="navbar"> <div class="faq-button">FAQ</div> <div class="telegram-button">Telegram</div> </nav> <a class="support-button">Связаться</a> </header> <div class="title-box"> <div class="title">Магазин подписок<br>Супер Пупер</div> </div> </body> </html>
@font-face { font-family: 'Suisse Intl'; src: url(../static/fonts/SuisseIntl-Medium.otf) format('truetype'); } body { margin: 0; overflow-x: hidden; background-color: #FFF; } header { border-top-width: 0; position: fixed; display: flex; top: 0; left: 0; width: 100%; height: 7.407%; background: #E6E6E6; } .logo-text { display: flex; width: calc(8.333% * 2); flex-direction: column; justify-content: center; flex-shrink: 0; border: 1px solid rgba(0, 0, 0, 0.10); border-top-width: 0; background: #FFF; color: #000; text-align: center; font-family: Suisse Intl; font-size: 18.75px; font-style: normal; font-weight: 500; line-height: 7.407%; } .navbar { display: flex; width: calc(8.333% * 2); } .navbar div { display: flex; width: 100%; border: 1px solid rgba(0, 0, 0, 0.10); border-top-width: 0; background: #FFF; flex-direction: column; justify-content: center; align-items: center; color: #000; text-align: center; font-family: Suisse Intl; font-size: 15px; font-style: normal; font-weight: 500; } .support-button { display: flex; width: calc(8.333% * 2); flex-direction: column; justify-content: center; align-items: center; margin-left: auto; border: 1px solid rgba(0, 0, 0, 0.10); border-top-width: 0; background: #000; color: #FFF; text-align: center; font-family: Suisse Intl; font-size: 18.75px; font-style: normal; font-weight: 500; } .title-box { display: flex; width: 100%; height: calc(7.407% * 8); background: #FFF; justify-content: center; } .title { display: flex; width: calc(8.333% * 10); flex-direction: column; justify-content: center; color: #000; text-align: center; font-family: Suisse Intl; font-size: 71.53px; font-style: normal; font-weight: 500; } |
@font-face { font-family: 'Suisse Intl'; src: url(../static/fonts/SuisseIntl-Medium.otf) format('truetype'); } body { margin: 0; overflow-x: hidden; background-color: #FFF; } header { border-top-width: 0; position: fixed; display: flex; top: 0; left: 0; width: 100%; height: 7.407%; background: #E6E6E6; } .logo-text { display: flex; width: calc(8.333% * 2); flex-direction: column; justify-content: center; flex-shrink: 0; border: 1px solid rgba(0, 0, 0, 0.10); border-top-width: 0; background: #FFF; color: #000; text-align: center; font-family: Suisse Intl; font-size: 18.75px; font-style: normal; font-weight: 500; line-height: 7.407%; } .navbar { display: flex; width: calc(8.333% * 2); } .navbar div { display: flex; width: 100%; border: 1px solid rgba(0, 0, 0, 0.10); border-top-width: 0; background: #FFF; flex-direction: column; justify-content: center; align-items: center; color: #000; text-align: center; font-family: Suisse Intl; font-size: 15px; font-style: normal; font-weight: 500; } .support-button { display: flex; width: calc(8.333% * 2); flex-direction: column; justify-content: center; align-items: center; margin-left: auto; border: 1px solid rgba(0, 0, 0, 0.10); border-top-width: 0; background: #000; color: #FFF; text-align: center; font-family: Suisse Intl; font-size: 18.75px; font-style: normal; font-weight: 500; } .title-box { display: flex; width: 100%; height: calc(7.407% * 8); background: #FFF; justify-content: center; } .title { display: flex; width: calc(8.333% * 10); flex-direction: column; justify-content: center; color: #000; text-align: center; font-family: Suisse Intl; font-size: 71.53px; font-style: normal; font-weight: 500; }
(Запускаю через Flask - Python)
Дополнительно:
Ответы:
position:
fixed
The element is removed from the normal document flow, and no space is created for the element in the page layout.
https://developer.mozilla.org/en-US/docs/Web/CSS/p...
- Как это исправить, я не совсем понимаю, скажи, пожалуйста
- kiak0n0v, боди{ паддинг топ = высоте хедера}
- kiak0n0v, position: sticky;
- Rsa97, Куда именно ставить? Если ставлю в хедер, то он просто сжимается и все, если же ставлю в секцию, ничего не происходит
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Проблема, когда элемент
1. Неправильное использование CSS: Возможно, что у вас есть неправильные стили CSS, которые применяются к элементам
2. Некорректная структура HTML: Убедитесь, что ваш HTML-код правильно структурирован. Если элемент
3. Использование позиционирования: Если вы явно задали позиционирование элементам
Пример использования тега
для отображения кода: <pre lang="php"> <header> <h1>Заголовок</h1> </header> <div> <p>Содержимое</p> </div>
Помните, что каждая ситуация уникальна, поэтому вам может понадобиться провести дополнительные исследования и эксперименты, чтобы найти оптимальное решение для вашего конкретного случая.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопросВам также может быть интересно