JavaScript offsetParent case study

1. Definition of offsetParent: offsetParent is the parent element that is closest to the child element and has been positioned (position: absolute relative fixed). If there is no positioning in the parent element, offsetParent is: body element

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

If the element itself has fixed positioning and the parent element does not have positioning, the result of offsetParent is null (body in Firefox, null in other browsers)
The element itself has no fixed positioning, and the parent element does not have positioning, and offsetParent is the <body> element
The element itself has no fixed positioning, and the parent element has positioning, and offsetParent is the parent element closest to itself that has been positioned.
The offsetParent of the <body> 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] If the element itself has fixed positioning and the parent element does not have positioning, the result of offsetParent is null (body in Firefox, null in other browsers)
    */
    var test1 = document.getElementById('test1');
    console.log('test1 offsetParent: ' + test1.offsetParent);
    /*
    【2】The element itself has no fixed positioning, and the parent element does not have positioning, and offsetParent is the <body> element*/
    var test2 = document.getElementById('test2');
    console.log('test2 offsetParent: ' + test2.offsetParent);
    /*
    【3】The element itself has no fixed positioning, and the parent element does not have positioning, and offsetParent is the <body> element*/
    var test3 = document.getElementById('test3');
    console.log('test3 offsetParent: ' + test3.offsetParent);
    /*
    【4】The offsetParent of the <body> element is null
    */
     */
    console.log('body offsetParent: ' + document.body.offsetParent);//null
 
</script>
</body>
 
</html>

3. There is the following bug in IE7 regarding the offsetParent of positioning

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

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

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

<div id="test3" style="position:fixed;"></div>    
<script>
//firefox does not consider the problem of fixed positioning and returns <body>, while other browsers return null
console.log(test3.offsetParent);
</script>

【2】If the parent element has an element that triggers haslayout or is positioned, and the result of offsetParent is the parent element that is closest to the element and is positioned or triggers haslayout

<div id="div0" style="display:inline-block;">
    <div id='test'></div>    
</div>
<script>
//IE7- browser returns <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 returns <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>

This is the end of this article about the detailed explanation of JavaScript offsetParent case. For more relevant JavaScript offsetParent content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: