将内容定位在绝对定位的 div 之后

Question

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

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

如何将内容放置在滑块下方？

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

是否可以？（我宁愿不媒体查询，因为需要处理大量的分辨率）。

代码如下：（有关实时示例，请检查此小提琴：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%;
}

Answer 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>