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

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

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

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

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

代码是这样的：

<div class="homeContentTop">
    <ul class="homeBanner">//图片放置
        <li class="homeBanner1"><img src="data:images/banner01.png" alt=""/></li>
        <li class="homeBanner2"><img src="data:images/banner02.jpg" alt=""/></li>
        <li class="homeBanner3"><img src="data: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轮播图中小圆点的定位问题相关推荐

开源炫酷css轮播图可直接引入html文件使用含注释 jQuery插件
开源炫酷css轮播图可直接引入html文件使用含注释 jQuery插件 1.轮播图样式上图: 请访问:这里!! 查看轮播图效果. 2.如何在html里面引用文件的目录路径为: 需要轮播图插件的 ...
css轮播箭头怎么隐藏,CSS——轮播图中的箭头
注意事项: 1.定位中left权重比right高,top权重比bottom高 2.两个span标签嵌套在一个盒子中,将来显示隐藏只需要控制父盒子就行了 .box { width: 400px; hei ...
css如何设置轮播速度,css轮播图如何实现？
在往期文章小编介绍过 JS 如何实现轮播图.那么这篇文章我们来介绍另一种方法:CSS 轮播图如何实现. 实现效果实现思路用 CSS 实现图片轮播主要是用到 CSS3 animation 属性和 ...
轮播图切换圆点html,图片轮播器，点击小圆点按钮实现图片切换。别的都对。哪里错了呀！...
按照阿安老师的<焦点图轮播特效>这部教程,5-1课.一步一步做的.检查了好几遍都没有错呀?为什么就是不执行呢?别的都好了,就是点击小圆点切换到相应的图片不行,代码见69-76行,哪里错了呢 ...
HTML+CSS 轮播图电商网站注册界面抽屉主页头部界面
[练习]HTML+CSS 作业要求1 京东首页轮播图,效果如下 jd轮播图 <!DOCTYPE html> <html lang="en"> <he ...
html+css轮播图
昨天收到腾讯云客服电话,告知我网站域名备案后无法正常访问,管局会在25号强制解除备案! 我也是醉了,这坑货客服收到告知后部立刻联系,等到或到期了,联系我,无奈只能随便先写个东西放上去应付一下了! 这样 ...
html css实现自动滑动的轮播图,CSS 轮播图的实现（纯CSS，连续滑动无倒滑效果）...
简单demo:使用HTML+CSS 实现轮播图(三张图为例,分别为:红.绿.蓝)的效果. 实现效果: 不能发视频,截图来代替吧示意图1.png 示意图2.png 示意图3.png 实现思路使用 d ...
轮播图切换圆点html,jQuery插件实现带圆点的焦点图片轮播切换
这次分享的代码是jQuery插件,HovertreeImg是一个图片轮播jquery插件,使用方便,可以设置大小,圆点位置等,代码简洁 #img img{width:100%;height:100%; ...
swiper轮播图小圆点动态改变样式
1 创建轮播 data() {return {//初始化设置小圆点的颜色myBulletActive: '#1C9FE8'}; }, methods:{//外界传过来的颜色变化this.myBulle ...

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

CSS轮播图中小圆点的定位问题相关推荐

最新文章

热门文章