新手上道，磕碰不少，遇到一個輪播圖切換點（類似淘寶中的banner輪播下的小圓點）的位置問題，今天做個記錄。

就是下面這張圖中藍色圈中的部分的效果。

? ? ? ?我用的是定位流，“子絕父相”，ul的position設置為絕對定位absolute，直系的父元素設置一個position的屬性為relative。因為絕對定位的元素位置是相對于距離它最近的那個已定位的祖先(相對/絕對)元素決定的。 如果元素沒有已定位的祖先元素， 那么它的位置相對于初始包含塊。絕對定位的元素可以在它的包含塊向上、下、左、右移動。

? ? ? 一開始我敲的順序是圖片放在前面，小圓點ol放在后面，就出現了ol被擠下去了的情形。（我把圖片注釋掉后ol效果就有用了）

代碼是這樣的：

<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> 給兩個換了位置后就變這樣；?

不知道什么原因還是沒能在底部居中即使設置了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轮播图中小圆点的定位问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。