CSS中position的初始位置问题以及对offset偏移量的影响

最新推荐文章于 2025-03-21 21:56:50 发布

JUnKe55!W

最新推荐文章于 2025-03-21 21:56:50 发布

阅读量415

点赞数 2

文章标签： css3 html5

本文链接：https://blog.youkuaiyun.com/weixin_63459454/article/details/124130541

版权

本文探讨了CSS中div元素的居中对齐问题，通过示例代码展示了transform:translate(-50%,-50%)如何实现居中，并解释了在拖动操作中，transform改变的是元素位置而非position的标准位置。分析了offsetTop和offsetLeft在拖动时的表现，强调了transform不影响position标准位置的概念。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            position: absolute;
            top: 50%;
            left: 50%;
            /* transform: translate(-50%,-50%);  */
            width: 300px;
            height: 300px;
            background-color: salmon;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        div.addEventListener('mousedown', fn);
        function fn(e){
            var x = e.pageX - div.offsetLeft;
            var y = e.pageY - div.offsetTop;
            console.log(x);
            console.log(y);
            document.addEventListener('mousemove', fn1);
            function fn1(e){
                div.style.top = e.pageY + 'px'; 
                div.style.left = e.pageX + 'px'; 
            }
            document.addEventListener('mouseup', fn2);
            function fn2(){
                document.removeEventListener('mousemove', fn1);
            }
        }
    </script>
</body>
</html>

这里首先没有进行偏移处理，每一次拖动时导致每次都是盒子左上角与鼠标位置对齐