穆穆青风至 2021-07-09 11:43 采纳率: 97.4%
浏览 26
已采纳

准备设置一个过度消失的效果

为啥在父元素中加了position: relative;就可以鼠标放上去的时候右移的同时消失,如果不加的话,就只能右移,但是不会消失

<html>
    <head>
        <link rel="stylesheet" href="./css/reset.css">
        <style>
            div{
                width: 100px;
                height: 100px;
                overflow: hidden;
                background-color: chartreuse;
                position: relative;
            }
            img{
                width: 100px;
                height: 100px;
                position: absolute;
                left: 0px;
                transition: 1s;
            }
            div:hover img{
                left: 100px;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="./source/1.jpg" >
        </div>
    </body>
</html>

  • 写回答

2条回答 默认 最新

  • asia_deng 2021-07-09 11:53
    关注

    img position是absolute,它的位置是相对最近的position非static的祖先元素,div 加position:absolute就是相对div,没有加就是相对body。因为div的overflow是hidden,img.left为100时就跑到div外了,被div裁剪了。如果img相对body定位就没div什么事了

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 已采纳回答 7月9日
  • 创建了问题 7月9日

悬赏问题

  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像,如何解决?
  • ¥15 求daily translation(DT)偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的?
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3
  • ¥15 牛顿斯科特系数表表示
  • ¥15 arduino 步进电机
  • ¥20 程序进入HardFault_Handler