在图片底部制作响应式且固定位置的CSS圆形

Question

我有一个在CSS中无法解决的问题。在图像轮播底部，我有三个圆点，但它们需要具有响应性，以便13-21英寸笔记本电脑上的每个人都可以看到它们在其精确位置。但是，当我调整屏幕大小时，这些圆点会失去它们的位置，并且会被放置得更高或更低。这里是我所说的示例，当你调整屏幕大小时，你会发现这些圆点不在它们原来的良好位置（即图像底部）。我正在努力做到这一点。我使用的代码如下： 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>

- user2583429

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;

}

你仍然应该为整个网站添加'min-width'属性。

---

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

- rafaelcastrocouto

---

非常感谢您的快速回复。但是，正如您在我发布的设计中所看到的那样，这些圆应该只覆盖图像的一半。 - user2583429

Answer 2

解决方案非常明显: 我必须将圆圈定位为绝对位置，以便它不会影响我的下一个div的位置，并添加 'margin-left:-width px'。在这种情况下是: "margin-left: -50px;"。

- user2583429