絶対div要素の後ろに要素を入れよう

Question

画像といくつかの矢印を含む絶対スライダのdivを持っています。別のdivを追加すると、最後のdiv（絶対）の後に表示されますが、絶対divの後ろに表示されます。絶対位置はボックスフローを超えているので、最後の絶対divの後に新しいdivを入れる方法を知りたいだけです。

HTMLコード：

<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コード：

#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

一つの方法は、その後、スライダーを包む追加することですoverflow:autoと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>

Answer 2

絶対配置を使用すると、それを他の要素に関連付けることができなくなります。つまり、他の要素が絶対的な場合に、要素を相対的に配置することができます。

あなたの意図に合った別の解決策を探してみるべきです。私は、「通常の」ポジショニングを使用しない理由はわかりません。