把绝对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元素后的元素

回答

相关问题