CSS轮播图中小圆点的定位问题
新手上道,磕碰不少,遇到一个轮播图切换点(类似淘宝中的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;到此,圆点定位的问题就被莫名其妙的解决了。有哪位知道缘由或者有更好的解决方案欢迎留言。