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

如果您只想坚持使用纯css解决方案，只需将第一个滑块元素设为poisition:relative。

Answer 2

我不完全明白问题所在。
但这是我尝试在图片底部添加额外内容而不重叠。

（忽略其仅用于演示的javascript）

＆＃13;

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();
    }
  });
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

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

像这样：

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

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

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

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

3 个答案: