CSS，图像滑块高度与响应式设计中的叠加点放置问题

Question

可能忽略了一些简单的事情，但问题是浏览器 window 宽度很小。重叠点未正确放置（图像底部）。

注意：如果从 HTML LI 中删除 "HEIGHT" 属性，则不会显示图像。 玩height:auto；在 HTML/CSS 中有相同的结果。最大高度具有相同的效果。

我想删除硬编码的 HTML 样式高度，让点始终出现在图像底部，无论大小如何。

JavaScript 文件：

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//unslider.com/unslider.min.js" type="text/javascript"></script>

CSS：

.banner ul { 
  list-style: none; /* Lose the dot */
  margin:0px;
  padding:0px;
}

.banner li { 
  float: left; 
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.dots {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  bottom: 0px;
  background-color: #353535;
  height: 35px;
  opacity: .7;
}

.dots li {
  position:relative;
  top:11px;
  left:-4px;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 4px;
  text-indent: -999em;
  border: 2px solid #bc9a6a;
  background-color: white;
  border-radius: 6px;
  cursor: pointer;
  -webkit-transition: background .5s, opacity .5s;
  -moz-transition: background .5s, opacity .5s;
  transition: background .5s, opacity .5s;
}

.dots li.active {
  background: #3e245b;
  opacity: 1;  /* opacity of the inside dot (not the border) */
}


#slider{
  position: relative;
}

HTML:

<div id="slider" style=""> 
    <div class="banner">
        <ul>
            <li style="background-image: url(http://cdn.nliphonedwwwghan.savviihq.com/wp-content/uploads/2013/12/500px1-580x375.jpg); height:350px;"><a href="/testing"></a></li>
            <li style="background-image: url(http://cdn.nliphonedwwwghan.savviihq.com/wp-content/uploads/2013/12/500px1-580x375.jpg); height:350px;"><a href="testing"></a></li>
        </ul>
    </div>
</div> 
<div>
    No matter the window size, this text should be directly under the image.
</div>
<script>
        // main image settings
        $('.banner').unslider({
                arrows: false,
                delay: 2000,
                fluid: true,
                speed: 1000,
                dots: true
        });

</script>

Answer 1

您正在使用 position:absolute 作为点，要将它们正确定位在其父级而不是页面主体中，您需要提供滑块容器，该容器当前的 ID 为 'slider',相对定位.

#slider { position: relative; }

这将包含点在其父容器中的绝对定位。

CSS，图像滑块高度与响应式设计中的叠加点放置问题

CSS, image slider height with overlaying dots placement issue on responsive design

html

css

unslider