Put element after absolute div element - css

Question

I have an absolute slider div including images and some arrows, When I add another div, I expect it appear after last div (that is absolute), but it places behind absolute div, I know it's because absolute position is beyond box flow, and I just want to know how to put new div after last absolute div, widout giving margin-top?
HTML code:
<div id="next">
<i class="fa fa-5x fa-angle-right" aria-hidden="true"></i>
</div>
<div id="slider">
<div class="slide">
<img src="images/1.jpg" alt="">
</div>
<div class="slide">
<img src="images/2.jpg" alt="">
</div>
<div class="slide">
<img src="images/3.jpg" alt="">
</div>
</div>
<div id="prev">
<i class="fa fa-5x fa-angle-left" aria-hidden="true"></i>
</div>
<div id="advertises">
</div>
Css code:
#slider{
position: relative;
margin-top: -17px;
}
.slide{
position: absolute;
width: 100%;
height: 400px;
}
.slide img{
width: 100%;
height: 400px;
}
#next, #prev{
width: 70px;
margin-top: 150px;
cursor: pointer;
position: relative;
z-index: 100;
background-color: rgba(255, 255, 255, .5);
display: flex;
justify-content: center;
border-radius: 50%;
}
#next{
margin-right: 25px;
float: right;
}
#prev{
margin-left: 25px;
float: left;
}
#advertises{
width: 50%;
height: 300px;
border: 1px solid #101010;
display: flex;
}
Jsfiddle

Answer 1

When you use absolute positioning you lose the ability to relate that to other elements. That is, you can place a element relatively to other when the other is absolute.
You should try to look for another solution that fits your intention. I don't see the reason to not use a "normal" positioning.

Answer 2

One way is to wrap the slider, then add overflow:auto and height:400px
.wrapper {
overflow: auto;
height: 400px;
}
#slider {
position: relative;
margin-top: -17px;
}
.slide {
position: absolute;
width: 100%;
height: 400px;
}
.slide img {
width: 100%;
height: 400px;
}
#next,
#prev {
width: 70px;
margin-top: 150px;
cursor: pointer;
position: relative;
z-index: 100;
background-color: rgba(255, 255, 255, .5);
display: flex;
justify-content: center;
border-radius: 50%;
}
#next {
margin-right: 25px;
float: right;
}
#prev {
margin-left: 25px;
float: left;
}
#advertises {
clear: both;
width: 50%;
height: 300px;
border: 1px solid #101010;
display: flex;
}
<div class="wrapper">
<div id="next">
<i class="fa fa-5x fa-angle-right" aria-hidden="true"></i>
</div>
<div id="slider">
<div class="slide">
<img src="images/1.jpg" alt="">
</div>
<div class="slide">
<img src="images/2.jpg" alt="">
</div>
<div class="slide">
<img src="images/3.jpg" alt="">
</div>
</div>
<div id="prev">
<i class="fa fa-5x fa-angle-left" aria-hidden="true"></i>
</div>
</div>
<div id="advertises">
</div>