Detailed Explanation of JavaScript offsetParent Case

  • 2021-11-13 00:44:23
  • OfStack

1. offsetParent definition: Then offsetParent is the nearest positioned parent element (position: absolute relative fixed), and if there is no positioning in its parent element, offsetParent is body element

2. According to the definition, there are the following situations

If the element itself has an fixed location and the parent element does not have a location, the result of offsetParent is null (body in firefox, null in other browsers) The element itself has no fixed positioning, and the parent element has no positioning, and offsetParent is < body > Element The element itself has no fixed location, and the parent element has location, and offsetParent is the nearest and located parent element < body > The offsetParent of the element is null

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
 
<body>
 <div id="test1" style="position:fixed"></div>
 
 <div id="test2"></div>
 
 <div id="div0" style="position:absolute;">
    <div id="div1" style="position:absolute;">
        <div id='test3'></div>    
    </div>    
</div>
 
<script>
    /*
     " 1 "The element itself has fixed Location, the parent element does not have a location, then offsetParent The result of is null ( firefox The middle is: body Other browsers return as null ) 
    */
    var test1 = document.getElementById('test1');
    console.log('test1 offsetParent: ' + test1.offsetParent);
    /*
     " 2 "The element itself has nothing fixed Location, and there is no location for the parent element, offsetParent For <body> Element 
    */
    var test2 = document.getElementById('test2');
    console.log('test2 offsetParent: ' + test2.offsetParent);
    /*
     " 3 "The element itself has nothing fixed Location, and there is no location for the parent element, offsetParent For <body> Element 
    */
    var test3 = document.getElementById('test3');
    console.log('test3 offsetParent: ' + test3.offsetParent);
    /*
     " 4 " <body> Element's offsetParent Yes null
    */
     */
    console.log('body offsetParent: ' + document.body.offsetParent);//null
 
</script>
</body>
 
</html>

3. For the localized offsetParent in IE7, the following bug exists

"1" When the element itself is absolutely or relatively positioned, and the parent element has no positioned element, offsetParent in IE7-browser is < html >


<div id="test1" style="position:absolute;"></div>    
<script>
//IE7- Browser return <html> Other browsers return <body>
console.log(test1.offsetParent);
</script>

<div id="test2" style="position:relative;"></div>    
<script>
//IE7- Browser return <html> Other browsers return <body>
console.log(test2.offsetParent);
</script>

<div id="test3" style="position:fixed;"></div>    
<script>
//firefox The problem of fixed positioning is not considered, and it returns <body> All other browsers return null
console.log(test3.offsetParent);
</script>

"2" If the parent element has an element that triggers haslayout or a positioned element, and the result of offsetParent is the nearest parent element that is positioned or triggered haslayout


<div id="div0" style="display:inline-block;">
    <div id='test'></div>    
</div>
<script>
//IE7- Browser return <div id="div0"> Other browsers return <body>
console.log(test.offsetParent);
</script>

<div id="div0" style="position:absolute;">
    <div id="div1" style="display:inline-block;">
        <div id='test'></div>    
    </div>    
</div>
<script>
//IE7- Browser return <div id="div1"> Other browsers return <div id="div0">
console.log(test.offsetParent);
</script>

<div id="div0" style="display:inline-block;">
    <div id="div1" style="position:absolute;">
        <div id='test'></div>    
    </div>    
</div>
<script>
// All browsers return <div id="div1">
console.log(test.offsetParent);
</script>

Related articles: