JavaScript offsetParent case study

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

  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)
  2. The element itself has no fixed positioning, and the parent element does not have positioning, and offsetParent is the <body> element
  3. 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.
  4. 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:
  • In-depth analysis of JS OffsetParent property
  • Difference between js parentElement and offsetParent
  • Javascript drag series article 1 offsetParent property

<<:  Mysql8.0 uses window functions to solve sorting problems

>>:  Nginx restricts IP access to certain pages

Recommend

Docker MQTT installation and use tutorial

Introduction to MQTT MQTT (Message Queuing Teleme...

Discussion on the browsing design method of web page content

<br />For an article on a content page, if t...

Detailed explanation of Nginx+Tomcat load balancing cluster installation and configuration case

Table of contents Preface 1. Nginx+Tomcat 2. Conf...

Introduction to MySQL statement comments

MySQL supports three types of comments: 1. From t...

A brief introduction to Linux performance monitoring commands free

When the system encounters various IO bottlenecks...

Example usage of JavaScript tamper-proof object

Table of contents javascript tamper-proof object ...

Detailed explanation of JavaScript timer and button effect settings

Timer Effects: <div> <font id='timeC...

React event mechanism source code analysis

Table of contents Principle Source code analysis ...

How to access MySql through IP address

1. Log in to mysql: mysql -u root -h 127.0.0.1 -p...

Implementing a simple whack-a-mole game in JavaScript

This article shares the specific code for JavaScr...

jQuery plugin to implement minesweeper game (2)

This article shares the second article of using j...

Teach you how to deploy zabbix service on saltstack

Table of contents Saltstack deploys zabbix servic...

Implementation of nginx virtual host settings based on domain name, port, and different IP

1. Setting up nginx virtual host With virtual hos...

linux exa command (better file display experience than ls)

Install Follow the README to install The document...

Solution to the failure of entering the container due to full docker space

Since the problem occurred rather suddenly and th...