锚点连接-点击圆点图片更换位置问题

锚点连接-点击圆点图片更换位置问题

    关于昨晚遇到的图片锚点连接问题，原本效果图应该是点击数字小圆点，然后图片切换到想要的图片，出现的问题时点击小圆点之后，图片上层的所有东西跟着图片一块上去了，
    解决办法，给图片外面在套一个标签，
    问题原因：图片上层的元素相对于最外面的元素绝对定位，但是图片是最外围元素的内容，虽然overflow：hidden；不显示，但是图片上去了，图片上层的元素相对定位也上去了。所以给图片加个外标签，这样子最外围元素的内容范围就固定了。
源代码：

       

           
           
           
           
       

        
       

           
• 手机 电话卡>

           
• 手机 电话卡>

           
• 手机 电话卡>

           
• 手机 电话卡>

           
• 手机 电话卡>

           
• 手机 电话卡>

           
• 手机 电话卡>

           
• 手机 电话卡>

           
• 手机 电话卡>

           
• 手机 电话卡>

       

       

            1
            2
            3
            4
       

        <>
   

.main1{height:460px;position:relative;overflow:hidden;}
.main1 .pict{height:460px;overflow:hidden;}
.main1 .pict img{width:1226px;height:460px;display:block;}
.main1 ul{height:420px;width:232px;float:left;background:#000;opacity:0.5;padding:20px 0;position:absolute;top:0;left:0;z-index: 9;}
.main1 ul li a{font:14px/1.5 "Helvetica Neue","Microsoft Yahei";color:#fff;display:inline-block;text-align: left;height:42px; line-height:42px;width:182px;padding:0 20px 0 30px;}
.main1 ul li a i{float:right;font:16px "宋体";line-height: 42px;font-weight:bolder;}

 

posted @ 2018-08-04 09:38 帅到无穷大 阅读( ...) 评论( ...) 编辑 收藏