穆穆青风至 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日