把絕對div元素後的元素

我有一個絕對滑塊div包括圖像和一些箭頭，當我添加另一個div時，我期望它出現在最後一個div後（絕對），但它放在絕對div後面，我知道它是因爲絕對位置超出了盒子流量，我只想知道如何在最後一個絕對div之後放置新div，widout給予margin-top？把絕對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

來源

2017-06-02 ahoora

一種方法是包住滑塊，然後添加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>

來源

2017-06-02 10:32:05 Swellar

當您使用絕對定位時，將失去將其與其他元素關聯的能力。也就是說，當另一個是絕對的時候，你可以相對於其他元素放置一個元素。

您應該嘗試尋找適合您的意圖的另一個解決方案。我沒有看到不使用「正常」定位的原因。

來源

2017-06-02 10:32:16

把絕對div元素後的元素

回答

相關問題