掌握position的static relative absolute fixed sticky

发布于：2024-07-04 ⋅ 阅读:(90) ⋅ 点赞:(0)
<!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>
掌握position的static relative absolute fixed sticky

网站公告

今日签到

热门文章

最新发布
