Question

我有一个绝对滑块div，包括图像和一些箭头，当我添加另一个div时，我希望它出现在最后一个div之后（这是绝对的），但它放在绝对div后面，我知道它是因为绝对位置超出盒子流量，我只是想知道如何在最后一个绝对div之后放置新div，widout给出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代码：

#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

当您使用绝对定位时，您将无法将其与其他元素相关联。也就是说，当另一个是绝对的时，你可以将一个元素相对于另一个元素放置。

您应该尝试寻找符合您意图的其他解决方案。我没有看到不使用＆＃34;正常＆＃34;定位。

Answer 2

一种方法是包裹滑块，然后添加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>

将元素放在绝对div元素之后

2 个答案: