define

Explanation on MDN:

Htmlelement. offsetTop is a read-only property that returns the distance of the current element relative to the top inner margin of its offsetParent element.

  • offsetParent

Htmlelement. offsetParent is a read-only property that returns a reference to the nearest location element or table, TD,th, or body element that contains the element. When element style.display is set to “None”, offsetParent returns NULL.

paraphrase

OffsetTop is obtained relative to the parent element that has the offsetParent attribute. An element that contains the position attribute or is itself a table, TD,th, or body element has the offsetParent attribute

Code instructions

1. Compare whether the parent has location attributes

  • HTML (parent element is not table)
<div class="a"></div> <div class="parent"> <div class="parent2"> <div class="inner">Copy the code
  • css
    .a {
            height: 200px;
            background-color: #f00;
        }
        
        .parent1 {
            padding: 10px;
            border: 1px solid #ddd;
        }
        
        .parent2 {
            height: 200px;
            padding: 10px;
            border: 1px solid #ddd;
        }
        
        .inner {
            width: 50px;
            height: 50px;
            background: #f0f;
        }
Copy the code
  • script
 const inner = document.querySelector('.inner');
 console.log(inner.offsetTop, inner.offsetParent)
Copy the code
Results and Analysis

Inner parent does not have position or position: static

Inner parent (parent1, parent2) position property is non-static

  • In parent2 position: relative

    10 <div class=”parent2″>… </div>

    Note: 10 = paddingTop of parent2

  • Parent1 position: relative. Parent2 position is not set

    21 <div class=”parent1″>… </div>

    Note: 21 = paddingTop of parent1 + top border of parenT2 + paddingTop of parenT2

Analysis and Conclusion: When the offsetTop is obtained, the offsetParent layer by layer is searched. If there is one, the distance relative to the top inner margin of the element is returned. If not, the body is finally relative

2. The parent existstable,td,th,bodyThe element

// css .a { height: 200px; background-color: #f00; } .parent-table { width: 100%; border: 1px solid #ddd; } .parent-table th { border-bottom: 1px solid #ddd; } .parent-table th, .parent-table td { padding: 10px; } .inner { width: 50px; height: 50px; background: #f0f; } // html <div class="a"></div> <table class="parent-table"> <tr> <th>Header</th> </tr> <tr> <td> <div </div> </td> </tr> </table>Copy the code

Output: 10 <td>… </td>

Note: 10 = TD paddingTop

3. When the element isdisplay:none

.inner {
     display: none;
}
Copy the code

Output: 0 null

conclusion

Htmlelement. offsetTop Returns the top inner margin of the current element relative to its offsetParent element (with position set to non-static or itself a table, TD,th,body element). When the style.display element is set to “None”, offsetParent returns null and offetTop returns 0