How to make slick slider background for header?

Question

Slick

good night. I've been scratching my head with positioning for 3 days now. I'm relatively new, and I can't find a suitable answer on Google (maybe I'm not good at searching, sorry).
Essence of the question:
there is a slider (slick slider) - it is connected.
There is header.
I can not figure out who needs to set what positioning.
I express my deep gratitude in advance

<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

Hello, you need to place the slider inside the header, like this:

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

Then in CSS we get:

header {
 position: relative;
}

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

A div with class container can be placed inside .header__inner if you need it there. In the proposed version, the navigation will be placed on top of the slider, and the slider will occupy the entire width of the screen