在绝对定位的 div 之后定位内容答案

【问题标题】：Position content after absolute positioned divs在绝对定位的 div 之后定位内容
【发布时间】：2015-07-11 18:01:46
【问题描述】：

我有一个relative 定位的 div，其中包含另外三个 absolute 定位的 div，我将它们用作滑块。三个absolute 定位的div 中的每一个都包含一个带有width:100% 的图像。

问题是，当我想将内容放在我的滑块下时，内容与幻灯片重叠r（因为 div 是绝对定位的，而我没有知道实际高度 - 因为图像宽度为 100%，所以它会有所不同。

如何在滑块下方定位内容？

目前我正在使用一个 javascript 函数来检索图像的高度并将该高度作为填充添加到下面的内容中，但我更喜欢使用纯 css。

有可能吗？（我希望 NOT 对此使用媒体查询，因为需要处理大量的决议）。

这里是代码：（对于一个活生生的例子，检查这个小提琴：https://jsfiddle.net/g6ppqxLf/5/）

HTML：

<div id="slideshow" class="latime_100">

        <img src="poze/sageata_st.png" class="navigare" id="navigare_st" onclick="go_prev();"></img>

        <div id="slider_1" class="slider" >

            <img src="http://www.freestockphotos.name/wallpaper-original/wallpapers/download-images-of-gentle-dogs-6866.jpg"></img>



        </div>

        <div id="slider_2" class="slider">

            <img src="http://3.bp.blogspot.com/-rZmCIp0C-hQ/Tx6aCFeweoI/AAAAAAAAAnQ/WqIEVBTIzRk/s1600/Cool-Tiger-Wallpaper-1920x1080-HD.jpg"></img>



        </div>

        <div id="slider_3" class="slider">

            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwazmPOPcUTK1AmVSPQjH7YLlBywxTpkQi4LEQ40HJOg6_8Qyw"></img>



        </div>

        <img src="poze/sageata_dr.png" class="navigare" id="navigare_dr" onclick="go_next();"></img>
    </div>

CSS （navigare_st 和 navigare_dr 是滑块箭头）：

.slider{

    width:100%;
    position:absolute;
}

.slider img{

  display: block;
  margin: 0 auto;
  width:100%;

  min-width: 1024px;

}

#slideshow{


    position: relative;
    background-color: white;
    z-index:100;
}

#navigare_st{

    position: absolute;
    z-index:1000;
    left:0px;
    top:45%;
    cursor: pointer;
    width:2.5%;
}

#navigare_dr {
  z-index: 1000;
  position: absolute;
  right: 0px;
  top: 45%;
  cursor: pointer;
  width:2.5%;
}

【问题讨论】：

如果你想让一个滑块更好，你设置一个固定的高度而不是 100%，随着图像高度的变化，图像滑块看起来不太好。我的建议将图像包装在一个 div 中（具有固定的宽度和高度），然后将图像属性设置为 100%
可能您已经知道了，但是如果您制作了一个具有不同高度的图像的滑块并且您希望后面的内容跟随流程，就好像不使用 position:absolute... 您的网络的用户体验不是会非常好（至少可以这么说）...所有内容一直在上下移动。
@AlvaroMenéndez 图像高度相同，小提琴中的那些只是示例

标签： html css

【解决方案1】：

我不完全理解问题所在。
但这是我在图片底部添加额外内容的尝试，没有重叠。

（忽略 javascript，仅用于演示）

var curslide = 0;
var elements;

$(document).ready(function() {
  elements = $('.slider');
  elements.hide();
  elements.first().show();

  $('#navigare_st').click(function() {
    if (curslide > 0) {
      curslide--;
      elements.hide();
      elements.eq(curslide).show();
    }
  });
  $('#navigare_dr').click(function() {
    if (curslide < elements.length) {
      curslide++;
      elements.hide();
      elements.eq(curslide).show();
    }
  });
});

.slider {
  width: 100%;
  //position: absolute;
}
.slider img {
  display: block;
  margin: 0 auto;
  width: 100%;
  min-width: 100px;
}
#slideshow {
  position: relative;
  background-color: white;
  z-index: 100;
}
#navigare_st {
  position: absolute;
  width: 50px;
  height: 50px;
  z-index: 1000;
  left: 0px;
  top: 45%;
  cursor: pointer;
  border-radius: 50%;
  background-color: white;
}
#navigare_dr {
  z-index: 1000;
  width: 50px;
  height: 50px;
  position: absolute;
  transform: rotate(180deg);
  right: 0px;
  top: 45%;
  cursor: pointer;
  border-radius: 50%;
  background-color: white;
}
.extra {
  width: 100%;
  height: 50px;
  top: 100%;
  background-color: firebrick;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  line-height: 24px;
  text-indent: 5px;
  font-size: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow" class="latime_100">

  <img src="https://cdn4.iconfinder.com/data/icons/miu/22/circle_back_arrow-128.png" class="navigare" id="navigare_st" />

  <div id="slider_1" class="slider">

    <img src="http://lorempixel.com/400/200/" />



  </div>

  <div id="slider_2" class="slider">

    <img src="http://lorempixel.com/400/200/sports" />



  </div>

  <div id="slider_3" class="slider">

    <img src="http://lorempixel.com/400/200/food" />

  </div>

  <img src="https://cdn4.iconfinder.com/data/icons/miu/22/circle_back_arrow-128.png" class="navigare" id="navigare_dr" />

  <div class="extra">
    Here comes the extra content?
  </div>
</div>

【讨论】：

【解决方案2】：

如果您只想坚持使用纯 css 解决方案，只需将您的第一个滑块元素提供给 position:relative。

【讨论】：

【解决方案3】：

您不应该使用position: absolute 来执行此任务。为什么？因为使用position: absolute 会从文档流中删除元素，所以浏览器会认为它们不占用页面空间。
请改用float:left 或float:right。它将完成相同的任务，但会导致父 div 增长以适应内容。

像这样：

.slider {
    width:100%;
    float: left;
}

我有你的 jfiddle 的更新版本，它显示了它的实际效果：https://jsfiddle.net/udfjm089/3/

坦率的告诉你，除非你的布局有必要，否则我不会推荐这个。使用overflow: hidden 为包装器 div 设置固定高度看起来会更好，并且不会导致页面内容反弹。

【讨论】：

【解决方案4】：

使页面上的元素具有动态高度不是一个好习惯。尝试使您的图像具有相同的高度，或者为幻灯片容器提供“最高”图像的高度。

通常，具有淡入淡出效果的幻灯片使用float: left; 表示幻灯片，然后在最后一张幻灯片之后使用clear:both。

但是，如果您坚持保留该配置并且只想快速修复，则此代码可以解决问题：

$('#slideshow').css('height', $('#slider_'+i+' img').height());

将其复制到您的 slider_init 和 go_slide 函数中。

真诚的

【讨论】：