Как создать контент чуть ниже абсолютного фонового изображения

*,
*::before,
*::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: aqua;
}
header{
    z-index: 999999999;
    overflow: hidden;
    position: sticky;
    top: -31px;
}
header .header_main{
    background-color: rgba(255,255,255,0.98);
}
header div.header_meta{
     font-family: 'Open Sans', sans-serif;
     font-weight: bold;
     font-size: 11px;
     border-bottom: 1px solid rgba(224, 224, 224, 0.56);
 }
header div.container{
    line-height: 30px;
    width: 90%;
    margin: auto;
    padding: 0 50px;
}
header div.container nav ul{
    line-height: 30px;
    margin: 0 auto;
    float: right;
}
header div.container nav ul li{
    float: right;
    list-style: none;
}
header div.container nav ul li a{
    text-decoration: none;
    float: right;
    padding: 0 10px;
    color: #ffffff;
}
header div.container nav ul li a:hover{
    text-decoration: underline;
    color: #E6E6E6;
}
header .header_meta .header_contact{
    margin: auto;
    line-height: 30px;
    color: #ffffff;
}header .header_main{
    box-shadow: 0 3px 4px -4px rgba(138, 138, 138, 0.65);
}
header .header_main .container_logo_nav{
    width: 90%;
    height: 60px;
    line-height: 60px;
    margin: 0 auto;
    padding: 0 4%;
}
header .header_main .container_logo_nav img{
    height: 100%;
    width: 216px;
    float: left;
}
header .header_main .container_logo_nav ul{
    float: right;
    padding-right: 1%;
}
header .header_main .container_logo_nav ul li{
    float: right;
    list-style: none;
}
header .header_main .container_logo_nav ul li a{
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: bolder;
    font-size: 14px;
    color: #6E6E6E;
    padding: 0 13px;
    transition: 300ms;
}
header .header_main .container_logo_nav ul li a.search{
    font-size: 11px;
}
header .header_main .container_logo_nav ul li a:hover{
    color: #000000;
}
 .container_slider{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 82vh;
    animation: animate 35s ease-in-out infinite;
    background-size: cover;
    background: no-repeat center;
    clear: both;
    display: block;
}
.container_slider::before{
    width: 100%;
    height: 100%;
    content:"";
    background-color: rgba(22,22,22,0.2);
    position: absolute;
    top: 0;
}
@keyframes animate{
    0%,100%{
        background-image: url("Background_Image1");
    }
    20%{
        background-image: url("Background_Image2");
    }
    40%{
        background-image: url("Background_Image3");
    }
    60%{
        background-image: url("Background_Image4");
    }
    80%{
        background-image: url("Background_Image5");
    }
}
.container_slider .outer{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    text-align: center;
}
.container_slider .outer .details{
}
.container_slider .outer .details h1{
    font-family: 'Finger Paint', cursive;
    font-weight: lighter;
    color: #ffffff;
    font-size: 70px;
    line-height: 77px;
    padding: 15px 0;
    animation: caption 600ms ease-in-out 1;
}
@keyframes caption {
    0%{
        transform: translate(0, -20px);
        opacity: 0;
    }
    100%{
        transform: translate(0, 0);
        opacity: 1;
    }
}
.container_slider .outer .details span{
    font-family: 'Open Sans';
    font-weight: 600;
    font-size: 16px;
    color: #ffffff;
    display: block;
    animation: ltlspan 600ms linear 1;
}
@keyframes ltlspan {
    0%{
        transform: translate(0, 20px);
        opacity: 0;
    }
    100%{
        transform: translate(0, 0);
        opacity: 1;
    }
}
.container_slider .outer .buttons{
    width: 100%;
    margin-top: 40px;
}
.container_slider .outer a{
    background-color: #f8f8f8;
    width: 152px;
    height: 46px;
    line-height: 23px;
    border-radius: 100px;
    padding: 10px 20px;
    margin: 0 10px;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    transition: 300ms;
    color: #666666;
    animation: abuttons 1300ms ease-in 1;
}
@keyframes abuttons {
    0%{
        transform: translate(0, -20px);
        opacity: 0;
    }
    100%{
        transform: translate(0, 0);
        opacity: 1;
    }
}
.container_slider .outer a:first-child{
    background-color: #109bc5;
    color: #ffffff;
    border-bottom: 1px solid #0079a3;
}
.container_slider .outer a:first-child:hover{
    background-color: rgba(16, 156, 198, 0.9);
}
.container_slider .outer a:nth-child(2):hover{
    background-color: rgba(255, 255, 255, 0.86);
    color: black;
}
div.box{
    width: 100px;
    height: 100px;
    background-color: blue;
    /* I want this box to be displayed below my background image */
}

<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>Untitled Document</title>
<link rel = "preconnect" href = "https://fonts.gstatic.com">
<link href = "https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel = "stylesheet">
<link href = "https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@700&display=swap" rel = "stylesheet">
<link href = "https://fonts.googleapis.com/css2?family=Finger+Paint&display=swap" rel = "stylesheet">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link href = "https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap" rel = "stylesheet">
<link rel = "stylesheet" href = "css/style.css">
</head>

<body>
<header>
  <div class = "header_meta">
    <div class = "container">
      <nav>
        <ul>
          <li> <a href = "#">Registration</a> </li>
          <li> <a href = "#">Customer Login</a> </li>
        </ul>
      </nav>
      <div class = "header_contact"> <span>Call us now: 555-147-5643</span> </div>
    </div>
  </div>
  <div class = "header_main">
    <div class = "container_logo_nav">
        <span class = "logo"><a href = "#"> <img src = "images/logo-large.png" alt = ""> </a> </span>
     <nav class = "main_menu">
         <ul>
             <li><a class = "search" href = "#"><i class = "fa fa-search"></i></a></li>
             <li><a href = "#">News</a></li>
             <li><a href = "#">Contact</a></li>
             <li><a href = "#">About</a></li>
             <li><a href = "#">Deals</a></li>
             <li><a href = "#">Destinations</a></li>
             <li><a href = "#">Welcome</a></li>
         </ul>
     </nav>
    </div>
  </div>
</header>
    <div class = "container_slider">
         <div class = "outer">
             <div class = "details">
                 <h1>To Travel is to live</h1>
                 <h2>
                     <span>Want to make a journey? We got the destinations!</span>
                 </h2>
             </div>
             <div class = "buttons">
                 <a href = "#">ALL DESTINATIONS</a>
                 <a href = "#">LATEST OFFERS</a>
             </div>
         </div>
    </div>
<div class = "box"></div>
</body>
</html>