Задать вопрос
@Balundula
html

Как вывести навигацию в самый верх?

Верстаю страницу и в header создал блок с фоном и навигацией. Но навигация находится внизу странички, под фоном. Как её перенести на верх странички, чтобы она была под фоном?

<body>
    <div class="page">
        
        <header class="header">
            <div class="header-bg">
                <img class="header-bg-clouds" src="img/header-clouds.png">
            </div>

            <nav class="nav">
                 <p>12333</p>
            </nav>
        </header>
    </div>

</body>

body{
    font-family: "SF Pro Display";
    font-weight: 400;
    font-size: 18px;

    max-width: 1920px;
    height: 4000px;
    margin: 0 auto;
}

page{
    width: 1170px;

}

/*-------------------HEADER-------------------*/

.header-bg-clouds{
    max-width: 1920px;
    width: 2075px;
    height: 418px;

    position: absolute;
    left: 0px;
    top: 481px;
}

.header-bg{
    height: 782px;

    background: url("../img/header-bg.jpg") no-repeat center;
    background-position: -33px -42px;
    background-size: 1986px 824px;

    filter: blur(20px);
    z-index: 0;
}

/*nav*/

.nav {
    width: 1920px;
    height: 90px;
    max-width: 1920px;

    border-bottom: 1px solid #DADADA;

    top: 0;
}
  • Вопрос задан
  • 147 просмотров
5 комментариев
Подписаться 1 Простой 5 комментариев
Решения вопроса 1
DanArst
@DanArst Куратор тега CSS
Гриффиндор в моде при любой погоде!
Ну как вариант, если именно данная структура нужна, то для header-bg и header задайте данные стили:
.header {
position: relative;
}
.header-bg{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("../img/header-bg.jpg") no-repeat center;
background-size: cover;
background-attachment: fixed;
filter: blur(20px);
z-index: 0;
}
Ответ написан
4 комментария
4 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
Trainee - IT Support
move2usajobs LLC • Лос-Анджелес
от 2 000 до 4 000 $
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Ищу UX/UI-дизайнера + верстальщика на Tilda
29 нояб. 2024, в 15:36
40000 руб./за проект
Разработка IoT устройств на базе LoRaWAN для мониторинга почв
29 нояб. 2024, в 15:09
1500000 руб./за проект
Написать программу-конвертор Гугл таблиц в XML Яндекс недвижимость
29 нояб. 2024, в 14:53
5000 руб./за проект
Ещё заказы