Как сделать slick slider background-ом для header?

Question

[kotik322]

доброй ночи. Ломаю голову с позиционированием уже 3 день. Я относительно новичек, и не могу найти подходящего ответа в гугле( возможно плохо ищу, сори).
Суть вопроса:
есть слайдер(slick slider)- он подключен.
Есть header.
Не могу разобраться кому нужно задать какое позиционирование.
Заранее выражаю огромную благодарность

<header class="header">

        <div class="container">
            
            <div class="header__inner">
              <div class="header__inner-top">
                <img src="./img/logo.png" alt="" class="header__logo"/>
                <nav class="menu">
                  <ul class="menu__list">
                    <li class="menu__item">
                      <a href="#" class="menu__link">Home</a>
                    </li>
                    <li class="menu__item">
                      <a href="#" class="menu__link">Shop</a>
                    </li>
                    <li class="menu__item">
                      <a href="#" class="menu__link">Brands</a>
                    </li>
                    <li class="menu__item">
                      <a href="#" class="menu__link">Blog</a>
                    </li>
                    <li class="menu__item">
                      <a href="#" class="menu__link">About</a>
                    </li>
                    <li class="menu__item">
                      <a href="#" class="menu__link">Contact</a>
                    </li>
                  </ul>
                </nav>
              </div>   <!--header__inner-top-->
    
              <div class="header__pretitle">Spring / Summer Collection</div>
              <div class="header__title">UP TO 60% DISCOUNT ON NEW ARRIVALS</div>
              <div class="header__subtitle"> TRENDING NEW ITEMS,FROM CREATORS AROUND THE WORLD</div>
              <a href="#" class="header__btn-shop">SHOP NOW</a>
    
            </div>   <!-- header__inner-->
            
          </div>   <!--container  -->

/* ============slider========= */


.slider {
 display: flex;
 justify-content: center;
 align-items: center;
 min-width: 100%;
 min-height: 100vh;
 position: absolute;
 top: 0;
 left: 0;
 /* z-index: 1; */

}


.slider__item {
    background-size: cover;
    background-repeat: no-repeat;
    background-position:top center;
    min-width: 100%;
    min-height: 100vh;
}

.slick-dots {
    position: absolute;
    bottom: 10px;
    display: flex;

}



.slick-dots li button {
    width: 12px;
    height: 12px;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0;
    border:none;
}

.slick-dots .slick-active button {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid #fff;
    background-color: transparent;
    outline: none;
}
.slick-dots .slick-active button:focus {
    outline: none;
}

.slick-dots li + li {
    margin-left: 10px;
}



/* ==============header====== */

.header {
    width: 100%;
}


.container {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
}

.header__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 28px;

}

.header__inner-top {
    margin-bottom: 252px;
    display: flex;
}

.menu {
margin-left: auto;
}

.menu__list {
    display: flex;
}

.menu__item:not(:last-child) {
    margin-right: 75px;
}


.menu__link {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 19px;
    color: #fff;
}

.header__pretitle {
    padding-bottom: 50px;
    font-family: 'Open Sans', sans-serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 19px;
    color: #fff;
    text-transform: uppercase;

}

.header__title {
    padding-bottom: 49px;
    min-height: auto;
    font-family: 'Lato', sans-serif;
    font-size: 60px;
    font-weight: 400;
    line-height: 19px;
    color: #fff;
}

.header__subtitle {
    padding-bottom: 50px;
    font-family: 'Open Sans', sans-serif;
    font-size: 30px;
    line-height: 36px;
    color: #fff;

}

.header__btn-shop {
    padding: 23px 49px 22px 50px;
    max-width: 200px;
    max-height: 60px;
    border: 2px solid #fff;
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 19px;
}

Answer 1

[Николай Миронов]

Здравствуйте, вам нужно слайдер разместить внутри header, вот таким образом:

<header>
 <div class="header__inner"></div>
 <div class="slider"></div>
</header>

Тогда в CSS получим:

header {
 position: relative;
}

.header__inner {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 99;
}

Div с классом container можно разместить внутри .header__inner если он вам там нужен. В предложенном варианте навгиация разместится сверху поверх слайдера, а слайдер будет занимать всю ширину экрана