The CSS image slider overlays the position of the elements - html

Question

I am coding a simple landing page. In theory, each div you code will show below the previous one and so forth.
I made a little navbar and then expected the slider to appear below it. Then, I wanted to add an image below the slider (the one with brands' logos). Problem is, the image appears below the navbar. I am guessing there is something with the position of the slider but I can't figure out what it is.
I'd rather not use position: absolute or position: relative to position all my elements, so I am here to understand what the problem might be.
html {
font-family: "Arial", Helvetica, sans-serif;
}
/*---navigation--*/
.top-nav {
height: 105px;
display: flex;
align-items: center;
}
ul.main-nav {
display: flex;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
height: 40px;
}
ul.main-nav li {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 15px;
font-weight: 700;
color: #FCAF17;
}
ul.main-nav li:hover {
cursor: pointer;
color: #FFFFFF;
}
/* main slider */
.slider {
width: 100%;
height: 100%;
left: 0;
top: 25%;
opacity: 1;
z-index: 0;
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-flow: row wrap;
-webkit-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
align-content: center;
-webkit-transition: -webkit-transform 1600ms;
transition: -webkit-transform 1600ms, transform 1600ms;
-webkit-transform: scale(1);
transform: scale(1);
}
/* image slider position */
.slide1 {
position: absolute;
left: 0;
}
.slide2 {
position: absolute;
left: 100%;
}
.slide3 {
position: absolute;
left: 200%;
}
/* slider pagination */
.slider-pagination {
position: absolute;
bottom: 20px;
width: 100%;
left: 0;
text-align: center;
z-index: 1000;
}
.slider-pagination label {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
background: rgba(255, 255, 255, 0.2);
margin: 0 2px;
border: solid 1px rgba(255, 255, 255, 0.4);
cursor: pointer;
}
/* slider control */
input {
visibility: hidden;
}
.slide-radio1:checked~.slider {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.slide-radio2:checked~.slider {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide-radio3:checked~.slider {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
/*----------slider end----------------*/
.box {
background-color: blue;
}
<!--navigation-->
<div class="top-nav">
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/logo.jpg"></img>
</div>
<ul class="main-nav">
<li>HOMBRE</li>
<li>MUJER</li>
<li>NIÑOS</li>
<li>Carrito</li>
</ul>
<!--image slider-->
<div class="css-slider-wrapper">
<input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
<input type="radio" name="slider" class="slide-radio2" id="slider_2">
<input type="radio" name="slider" class="slide-radio3" id="slider_3">
<div class="slider-pagination">
<label for="slider_1" class="page1"></label>
<label for="slider_2" class="page2"></label>
<label for="slider_3" class="page3"></label>
</div>
<div class="slider slide1">
<div>
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg">
</div>
</div>
<div class="slider slide2">
<div>
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/evoACCURACY_980x400px.jpg">
</div>
</div>
<div class="slider slide3">
<div>
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg">
</div>
</div>
</div>
<div class="brands">
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/marcas.jpg">
</div>
Live demo

Answer 1

first thing you can add Position : relative and second add height to div like i added <div class="demo" style="opacity:0;"> <img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg"> </div>
<div class="css-slider-wrapper">
<div class="demo" style="opacity:0;"> <img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg"> </div>
<input name="slider" class="slide-radio1" checked="" id="slider_1" type="radio">
<input name="slider" class="slide-radio2" id="slider_2" type="radio">
<input name="slider" class="slide-radio3" id="slider_3" type="radio">
<div class="slider-pagination">
<label for="slider_1" class="page1"></label>
<label for="slider_2" class="page2"></label>
<label for="slider_3" class="page3"></label>
</div>
<div class="slider slide1">
<div>
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg">
</div>
</div>
<div class="slider slide2">
<div>
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/evoACCURACY_980x400px.jpg">
</div>
</div>
<div class="slider slide3">
<div>
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg">
</div>
</div>
</div>
use style :
.css-slider-wrapper {
position: relative;
}
.slide1 {
left: 0;
}
try it i thing it's work other give me Demo line https://jsfiddle.net/