css - 使图像底部的 css 圆圈响应并位于固定位置

Question

我有一个我无法在 css 中解决的问题。在图像 slider 的底部，我有三个圆圈，但它们需要有点响应，以便笔记本电脑上从 13' 到 21' 的每个人都可以在它们的确切位置看到它们。但是当我调整屏幕大小时，这些圆圈会松动它们的位置并且会被放置得更高或更低。 Here is the example我说的是，当你调整屏幕大小时，你会看到圆圈不在它们原来的好位置，在图像的底部。 I am working towards this .我的代码如下:

CSS

.bxslider {

margin: 0; 
padding:0;  

}

#bijschrift {

position: relative;
left: 65%;
height: auto;
bottom: 250px;
float: left;    
z-index: 9999;
}

#bijschrifthoofd {  
z-index: 9999;
opacity: 0.8;
padding-left: 10px;
padding-right: 10px;
    background-color: #212121;
}
#bijschrifthoofd span {
    width:  auto;
        color: white;
    font-family: 'Open Sans', sans-serif;
font-weight: 500;
line-height: 45px;
font-size: 150%;

}
#bijschriftonder {
z-index: 9999;
opacity: 0.8;
margin-top: 10px;
padding-left: 10px;
padding-right: 10px;
    background-color: #212121;
    float: left;
}
#bijschriftonder span {
    width: auto;
        color: white;
    font-family: 'Open Sans', sans-serif;
font-weight:100;
line-height: 45px;
font-size: 22px;

}
#cirkelcontainer {
width: 100%;
height: auto;
position: relative;
bottom: 200px;
z-index: 9999;
display: block;

}
.circle
{
    display:table-cell;
width:80px;
height:80px;
border-radius:40px;
font-size:16px;
color:white;
vertical-align: top;
text-align:center;
background:#00ccff;
float: left;

font-family: 'Open Sans', sans-serif;
font-size: 22px;
line-height: 80px;
}
.circle2 {
    display:table-cell;
    margin-left: 2%;
    z-index: 9999;
width:80px;
height:80px;
border-radius:40px;
font-size:16px;
color:white;
vertical-align: top;
text-align:center;
background:#e05c50;
float: left;

font-family: 'Open Sans', sans-serif;
font-size: 22px;
line-height: 80px;
}
.circle3 {
    display:table-cell;
    margin-left: 10%;
    z-index: 9999;
width:80px;
height:80px;
border-radius:40px;
font-size:16px;
color:white;
vertical-align: top;
text-align:center;
background:#0099cc;
float: left;

font-family: 'Open Sans', sans-serif;
font-size: 22px;
line-height: 80px;
}

HTML

<ul class="bxslider" >
  <li><img src="fotos/Untitled-5.jpg" title="Funky roots" /></li>
  <li><img src="fotos/Untitled-4.jpg" title="The long and winding road" /></li>
  <li><img src="fotos/Untitled-3.jpg" title="Happy trees" /></li>

</ul>
<div id="bijschrift">
<div id="bijschrifthoofd"><span>UW SPRINGPLANK NAAR INSPIRATIE</span></div>
<div id="bijschriftonder"><span>En authentieke waterpret</span></div>
</div>
<div style="clear:both"></div>
<div id="cirkelcontainer">
    <div class="circle">O</div>
    <div class="circle2">IB</div>
    <div class="circle3">T</div>
</div>

</body>
</html>

Answer 1

我不确定圆圈的“确切位置”在哪里。我假设它位于底部的图像上方，如下所示:

http://jsfiddle.net/Y65mW/1/

所以我把圆圈的 Html 改成了这样:

 <div id="circle1" class="circle">O</div>

和 Css，因此我们可以使用单个圆圈样式定义:

.circle {
  position: absolute;
  width:80px;
  height:80px;
  border-radius:40px;
  ...
}
#circle1 {
  left: 60px;
  background:#00ccff;

您仍然应该向整个网站添加一个“最小宽度”属性。

---

我在这里更新了解决方案http://jsfiddle.net/Y65mW/3/embedded/result/