HTML-CSS小知识——translate基于自身移动、绝对定位基于父盒子

最新推荐文章于 2024-09-07 22:06:06 发布

scott嘻嘻

最新推荐文章于 2024-09-07 22:06:06 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端小知识文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/jiongshaopeng/article/details/113812170

前端小知识专栏收录该内容

5 篇文章

订阅专栏

本文解析了HTML-CSS中translate的移动机制，强调了它在标准流和绝对定位中的不同应用。通过实例说明translate是基于自身移动的，而绝对定位则基于父元素。重点在于50%偏移的含义和实际效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML-CSS小知识——translate是基于自身移动的、绝对定位基于父盒子

例子

无论是在标准流情况还是绝对定位下，translate都是基于自身移动的；绝对定位基于父盒子

例子

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body>div{
            width: 800px;
            height: 500px;
            margin: 0 auto;
            background-color: red;
            position: relative;
        }

        .move{
            width: 200px;
            height: 200px;
            position: absolute;
            left: 50%;
            top: 50%;
            background-color: green;
            transition: all 0.5s linear;
        }

        .move:active{
            transform: translateX(50%);
        }
    </style>
</head>
<body>
    <div>
        <div class="move">移动</div>
    </div>
</body>
</html>