How to create content just below an absolute background image - html

Question

I created some background images in a div with slideshow and some content displaying on that, and now I'm trying to add a section right below my background image but anything I add after my background div in my html, locates behind my background image and top of my window as if I've had created no content in my webpage before this section except a navbar with sticky position. I put my codes here for better perception.
I'm trying to create content just after my background image as different, separated parts of my webpage, does anyone have an idea?
P.S: My main focus is running this web on full screen windows so please excuse my cluttered code result in non-full-screen windows.
*,
*::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> Registration </li>
<li> Customer Login </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"> <img src="images/logo-large.png" alt=""> </span>
<nav class="main_menu">
<ul>
<li><a class="search" href="#"><i class="fa fa-search"></i></a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Deals</li>
<li>Destinations</li>
<li>Welcome</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">
ALL DESTINATIONS
LATEST OFFERS
</div>
</div>
</div>
<div class="box"></div>
</body>
</html>

Answer 1

You have set your wrapper to position absolute together with inner. I have changed the .container_slider to relative to wrap properly your slider and box.
[screenshot of the result][1]
here is a screenshot: https://i.stack.imgur.com/8hTNT.jpg
*,
*::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: relative; /*changed to relative*/
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('https://www.pexels.com/photo/green-leaf-plant-808510/');
}
20% {
background-image: url('https://www.pexels.com/photo/green-leaf-plant-808510/');
}
40% {
background-image: url('https://www.pexels.com/photo/green-leaf-plant-808510/');
}
60% {
background-image: url('https://www.pexels.com/photo/green-leaf-plant-808510/');
}
80% {
background-image: url('https://www.pexels.com/photo/green-leaf-plant-808510/');
}
}
.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 */
}