Задать вопрос
@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;
}
  • Вопрос задан
  • 133 просмотра
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 комментария
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Реализовать полноценную систему учета в Битрикс24
02 мая 2024, в 10:36
10000 руб./за проект
Разработать сервис на Golang
02 мая 2024, в 10:26
1500 руб./в час
Перенести 9 страниц сайта из песочницы на бой
02 мая 2024, в 10:01
15000 руб./за проект
Ещё заказы