JavaScript-OffsetParent-Fallstudie

1. Definition von offsetParent: offsetParent ist das übergeordnete Element, das dem untergeordneten Element am nächsten ist und positioniert wurde (Position: absolut relativ fest). Wenn im übergeordneten Element keine Positionierung vorhanden ist, ist offsetParent: Body-Element

2. Laut Definition gibt es folgende Situationen

Wenn das Element selbst eine feste Positionierung hat und das übergeordnete Element keine Positionierung, ist das Ergebnis von offsetParent null (body in Firefox, null in anderen Browsern).
Das Element selbst hat keine feste Positionierung und das übergeordnete Element hat keine Positionierung, und offsetParent ist das <body>-Element
Das Element selbst hat keine feste Positionierung, und das übergeordnete Element hat eine Positionierung, und offsetParent ist das übergeordnete Element, das ihm am nächsten ist und positioniert wurde.
Der OffsetParent des <body>-Elements ist null

<!DOCTYPE html>
<html lang="de">
 
<Kopf>
    <meta charset="UTF-8">
    <title>Dokument</title>
</Kopf>
 
<Text>
 <div id="test1" style="position:fest"></div>
 
 <div id="test2"></div>
 
 <div id="div0" style="position:absolute;">
    <div id="div1" style="position:absolute;">
        <div id='test3'></div>    
    </div>    
</div>
 
<Skript>
    /*
    [1] Wenn das Element selbst eine feste Positionierung hat und das übergeordnete Element keine Positionierung, ist das Ergebnis von offsetParent null (body in Firefox, null in anderen Browsern)
    */
    var test1 = document.getElementById('test1');
    console.log('test1 offsetParent: ' + test1.offsetParent);
    /*
    【2】 Das Element selbst hat keine feste Positionierung und das übergeordnete Element hat keine Positionierung und offsetParent ist das <body>-Element */
    var test2 = document.getElementById('test2');
    console.log('test2 offsetParent: ' + test2.offsetParent);
    /*
    【3】 Das Element selbst hat keine feste Positionierung und das übergeordnete Element hat keine Positionierung und offsetParent ist das <body>-Element */
    var test3 = document.getElementById('test3');
    console.log('test3 offsetParent: ' + test3.offsetParent);
    /*
    【4】Der OffsetParent des <body>-Elements ist null
    */
     */
    console.log('body offsetParent: ' + document.body.offsetParent);//null
 
</Skript>
</body>
 
</html>

3. Es gibt den folgenden Fehler in IE7 bezüglich des offsetParent der Positionierung

[1] Wenn das Element selbst absolut oder relativ positioniert ist und das übergeordnete Element kein positioniertes Element hat, ist offsetParent in IE7-Browsern <html>

<div id="test1" style="position:absolute;"></div>    
<Skript>
//IE7-Browser gibt <html> zurück, andere Browser geben <body> zurück
Konsole.log(test1.offsetParent);
</Skript>

<div id="test2" style="position:relative;"></div>    
<Skript>
//IE7-Browser gibt <html> zurück, andere Browser geben <body> zurück
Konsole.log(test2.offsetParent);
</Skript>

<div id="test3" style="position:fest;"></div>    
<Skript>
//Firefox berücksichtigt das Problem der festen Positionierung nicht und gibt <body> zurück, während andere Browser null zurückgeben
Konsole.log(test3.offsetParent);
</Skript>

【2】Wenn das übergeordnete Element ein Element hat, das haslayout auslöst oder positioniert ist, und das Ergebnis von offsetParent das übergeordnete Element ist, das dem Element am nächsten ist und positioniert ist oder haslayout auslöst

<div id="div0" style="display:inline-block;">
    <div id='Test'></div>    
</div>
<Skript>
//IE7-Browser gibt <div id="div0"> zurück, andere Browser geben <body> zurück
Konsole.log(test.offsetParent);
</Skript>

<div id="div0" style="position:absolute;">
    <div id="div1" style="anzeige:inline-block;">
        <div id='Test'></div>    
    </div>    
</div>
<Skript>
//IE7-Browser gibt <div id="div1"> zurück, andere Browser geben <div id="div0"> zurück
Konsole.log(test.offsetParent);
</Skript>

<div id="div0" style="display:inline-block;">
    <div id="div1" style="position:absolute;">
        <div id='Test'></div>    
    </div>    
</div>
<Skript>
//Alle Browser geben <div id="div1"> zurück
Konsole.log(test.offsetParent);
</Skript>

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung des JavaScript-OffsetParent-Falls. Weitere relevante JavaScript-OffsetParent-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:

Detaillierte Analyse der JS OffsetParent-Eigenschaft
Unterschied zwischen js parentElement und offsetParent
Javascript Drag Series Artikel 1 OffsetParent-Eigenschaft

<<: Mysql8.0 verwendet Fensterfunktionen, um Sortierprobleme zu lösen

>>: Nginx beschränkt den IP-Zugriff auf bestimmte Seiten

So machen Sie React-Komponenten im Vollbildmodus

JavaScript-OffsetParent-Fallstudie

So machen Sie React-Komponenten im Vollbildmodus

Wissen Sie, warum Vue-Daten eine Funktion sind?

Mysql 5.7.18 Verwenden von MySQL proxies_priv zur Implementierung einer ähnlichen Benutzergruppenverwaltung

Implementierung der Docker Compose-Mehrcontainerbereitstellung

Detaillierte Erläuterung des Funktionsprinzips und der Lösung der Js-Modularisierung

Analysieren Sie den Unterschied zwischen den Methoden querySelector und getElementById in JavaScript

N Möglichkeiten, Elemente mit CSS zu zentrieren

Funktionsprinzip und Beispielanalyse des Linux-NFS-Mechanismus

So deinstallieren Sie IIS7-Web- und FTP-Dienste in Win7 vollständig

Fähigkeiten zur Seiten-Refaktorierung - Inhalt

Artikel empfehlen

Verwenden von CSS zum Implementieren einer Ladeanimation des Android-Systems

Einführung in Who-Befehlsbeispiele in Linux

CSS steuert den Abstand zwischen Wörtern durch die Eigenschaft „letter-spacing“

Tutorial zum Bereitstellen von LNMP und Aktivieren des HTTPS-Dienstes

Beispiel für reines CSS zum Ändern des Bildlaufleistenstils des Browsers

Detaillierte Erläuterung des Implementierungsprozesses und der Verwendung des Linux-Papierkorbmechanismus

Was wir über absolute und relative CSS-Werte zu sagen haben

Zusammenfassung von zehn Linux-Befehlsaliasen, die die Effizienz verbessern können

Detaillierte Erklärung der Semiotik in Html/CSS

js zur Realisierung eines einfachen Werbefensters

So berechnen Sie den Wert von ken_len im MySQL-Abfrageplan

CSS realisiert den Prozessnavigationseffekt (drei Methoden)

Grafische Anweisungen zum Hoch- und Herunterladen von Dateien auf einen Remote-Linux-Host basierend auf SecureCRT

Webdesign-Tutorial (2): Über Nachahmung und Plagiat

So verbinden Sie XShell und Netzwerkkonfiguration in CentOS7