掌握position的static relative absolute fixed sticky

最新推荐文章于 2024-07-24 16:20:17 发布

杨晓白

最新推荐文章于 2024-07-24 16:20:17 发布

阅读量269

点赞数 6

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_43719925/article/details/140172089

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Offset Function Test</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            position: relative;
        }

        .container {
            position: relative;
            top: 100px;
            left: 50px;
            border: 2px solid blue;
            padding: 20px;
        }

        .nested {
            position: relative;
            top: 30px;
            left: 40px;
            border: 2px solid red;
            padding: 10px;
        }

        .element {
            /* position: absolute;  不算nested 的 padding值  绝对定位 offsetTop 10+2+30+2+100+20 = 164 */
            position: relative;  /* 算nested 的 padding值 相对定位 offsetTop 10+10+30+2+20+2+100 =174 */
            top: 10px;
            left: 20px;
            border: 2px solid green;
        }
    </style>
</head>

<body>
    <div class="container">

        <div class="nested">

            <div class="element" id="testElement">Test Element</div>
        </div>
    </div>

    <script>
        /*
         * 获取元素距离BODY的偏移值 
         */
        function offset(element) {
            // debugger
            let parent = element.offsetParent,
                top = element.offsetTop,
                left = element.offsetLeft;
            while (parent) {
                if (!/MSIE 8/.test(navigator.userAgent)) {
                    left += parent.clientLeft;
                    top += parent.clientTop;
                }
                left += parent.offsetLeft;
                top += parent.offsetTop;
                parent = parent.offsetParent;
            }
            return {
                top,
                left
            };
        }

        // 测试函数
        window.onload = () => {
            const testElement = document.getElementById('testElement');
            console.log('testElement.offsetTop:', testElement.offsetTop)


            const offsets = offset(testElement);
            console.log('Offset Top:', offsets.top);
            console.log('Offset Left:', offsets.left);
        };
    </script>
</body>

</html>

杨晓白

关注

6
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
掌握position的static relative absolute fixed sticky

不算nested 的 padding值绝对定位 offsetTop 10+2+30+2+100+20 = 164 *//* 算nested 的 padding值相对定位 offsetTop 10+10+30+2+20+2+100 =174 */* 获取元素距离BODY的偏移值。
复制链接

扫一扫