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

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

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

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

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

代码是这样的：

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

             

         
     

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

不知道什么原因还是没能在底部居中即使设置了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;

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