CSS轮播图中小圆点的定位问题

新手上道，磕碰不少，遇到一个轮播图切换点（类似淘宝中的banner轮播下的小圆点）的位置问题，今天做个记录。

就是下面这张图中蓝色圈中的部分的效果。

CSS轮播图中小圆点的定位问题

我用的是定位流，“子绝父相”，ul的position设置为绝对定位absolute，直系的父元素设置一个position的属性为relative。因为绝对定位的元素位置是相对于距离它最近的那个已定位的祖先(相对/绝对)元素决定的。如果元素没有已定位的祖先元素，那么它的位置相对于初始包含块。绝对定位的元素可以在它的包含块向上、下、左、右移动。

一开始我敲的顺序是图片放在前面，小圆点ol放在后面，就出现了ol被挤下去了的情形。（我把图片注释掉后ol效果就有用了） CSS轮播图中小圆点的定位问题

代码是这样的：

<div class="homeContentTop">
    <ul class="homeBanner">//图片放置
        <li class="homeBanner1"><img src="images/banner01.png" alt=""/></li>
        <li class="homeBanner2"><img src="images/banner02.jpg" alt=""/></li>
        <li class="homeBanner3"><img src="images/banner01.png" alt=""/></li>
    </ul>//轮播图最后需要放一张与第一张相同的图作为跳转缓冲
     <div class="homeDotPack">//圆点放置
         <ol class="homeDot">
             <li></li>
             <li></li>
         </ol>
     </div>
</div>

给两个换了位置后就变这样；

CSS轮播图中小圆点的定位问题

不知道什么原因还是没能在底部居中即使设置了margin-bottom好像也无效。最后我加了如

.homeDotPack{

    width: 30px;
    height: 20px;
    position: absolute;
    left: 50%;
    margin-left: -15px;
    /*bottom:10%;*/
    /*margin-bottom:-15px;*/
    background-color: #b5d6ff;
}

效果如图

这三行被称为CSS中得到奇淫技巧，需要给其父元素设置position：relative。

position: absolute;
left: 50%;
margin-left: -15px;

到此，圆点定位的问题就被莫名其妙的解决了。有哪位知道缘由或者有更好的解决方案欢迎留言。

CSS轮播图中小圆点的定位问题

相关推荐