2 acquires the position of elements on the page

Acquiring position in the page elements
absolute position: from the body to the
relative positions of: the distance to the viewport

itself positioned Fixed
==> the offsetParent: null (not Firefox)
the offsetTop offsetLeft and are referenced to the body
==> offsetParent: body (Firefox)
has positioned itself not as a fixed
parent is not located
==> offsetParent: body
parent positioning
==> offsetParent: positioning parent

getPointAb function (Node) {
                 // the while loop and superimposed offsetTop offsetParent of the offsetLeft 
                var X = 0 ;
                 var Y = 0 ;
                 the while (Node) {
                    x+=node.offsetLeft;
                    y+=node.offsetTop;
                    
                    node = node.offsetParent;
                }
                
                return {x: x, y: y};
            }

Package function

<!DOCTYPE html>
<html id="html">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
                overflow: hidden;
            }
            #wrap{position: absolute;background: pink;left: 200px;top: 200px;}
            #inner1{position: absolute;background: deeppink;left: 150px;top: 150px;}
            div{
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body id="body" >
        <div id="wrap">wrap
            <div id="inner1">
                inner1
            </div>
        </div>
    </body>
    <script type="text/javascript">
        /*
         Obtains the position of elements on the page
            Absolute position: the distance from the body
            Relative position: the distance of the viewport
            
            
            Positioning itself as a fixed
                    ==> offsetParent: null (not Firefox)
                            offsetTop and also with reference to the body of offsetLeft
                    ==> offsetParent: body (Firefox)
            Positioning itself is not fixed
                    Parent not located
                        ==> offsetParent:body
                    Parent positioning
                        ==> offsetParent: Positioning parent
            
            
        */
        window.onload=function(){
            var inner1 = document.querySelector("#inner1");
            var point = getPointAb(inner1);
            console.log(point);
            
            
            // Boder margin value of this function will affect 
            function getPointAb (Node) {
                 // the while loop and superimposed offsetTop offsetParent of the offsetLeft 
                var X = 0 ;
                 var Y = 0 ;
                 the while (Node) {
                    x+=node.offsetLeft;
                    y+=node.offsetTop;
                    
                    node = node.offsetParent;
                }
                
                return {x: x, y: y};
            }
        }
    </script>
</html>

View Code

2 acquires the position of elements on the page

Guess you like