Eine kurze Erläuterung zum Festlegen der absoluten CSS-Position relativ zum übergeordneten Element

Wie wir alle wissen, wird die absolute CSS-Position standardmäßig entsprechend dem Dokument festgelegt. Wenn Sie beispielsweise nach position:absolute left:0 und top:0 festlegen, wird das Element in der oberen linken Ecke der Seite angezeigt.

Manchmal müssen wir eine relative absolute Position innerhalb des Containers des übergeordneten Elements festlegen

Um dies zu erreichen, müssen Sie das Positionsattribut des übergeordneten Elements auf relativ setzen. Nachdem Sie es auf relativ gesetzt haben, setzen Sie die Attribute left und top nicht. Zu diesem Zeitpunkt bleibt das übergeordnete Element, obwohl es relativ ist, an seiner ursprünglichen Position. Legen Sie dann die Position des untergeordneten Elements auf absolut fest und legen Sie seine Attribute links, oben, rechts und unten so fest, dass es sich um die absolute Position relativ zum übergeordneten Element handelt.

Nachfolgend sehen Sie den HTML-Beispielcode:

<!doctype html>
<html>
    <style type="text/css">
    #Vater {
       Position: relativ;
       Breite: 600px;
       Rand: automatisch;
       Höhe: 400px;
       Rand: 1px durchgehend rot;
    }

    #Sohn1 {
       Position: absolut;
       oben: 0;
       Hintergrund: #f0f0f0;
    }

    #Sohn2 {
       Position: absolut;
       unten: 0;
       Hintergrund: blau;
    }
    </Stil>
    <Text>
    <div id="Vater">
        <div id="son1">Ich bin son1</div>
        <div id="son2">Ich bin son2</div>
    </div>
    </body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: Erstellen Sie eine Bildschirmaufzeichnungsfunktion mit JS

>>: Lassen Sie Ihren Text mit dem Marquee-Attribut in HTML tanzen

Lösung für das MySQL IFNULL-Beurteilungsproblem

Detaillierte Erläuterung des grafischen Tutorials zur VMware12-Installation und CentOS8-Konfiguration (Tutorial zur Installation virtueller VM-Maschinen auf CentOS8)

Artikel

Eine kurze Erläuterung zum Festlegen der absoluten CSS-Position relativ zum übergeordneten Element

Lösung für das MySQL IFNULL-Beurteilungsproblem

Reiner CSS-Header, korrigierter Implementierungscode

JavaScript-Implementierung eines Karussellbeispiels

Das jQuery-Framework implementiert drei Animationsmethoden zum Anzeigen und Ausblenden von Elementen

Zusammenfassung von 6 Methoden zur Anzeige von Linux-Protokollen

Zusammenfassung einiger gängiger Verwendungen von Refs in React

Der Effekt des Heranzoomens in einem Taobao-Shop ähnelt dem Prinzip einer Diashow.

Detaillierte Erläuterung des vite2.0-Konfigurationslernens (Typescript-Version)

So importieren Sie txt in MySQL unter Linux

Detaillierte Erläuterung des grafischen Tutorials zur VMware12-Installation und CentOS8-Konfiguration (Tutorial zur Installation virtueller VM-Maschinen auf CentOS8)

Artikel empfehlen

Unterschiede zwischen den Windows Server-Systemversionen win2003, win2008R2, win2012, win2016 und win2019

Fallstudie zu JavaScript-Funktionsaufrufen, Apply- und Bind-Methoden

Detailliertes Tutorial zum Herunterladen, Installieren und Konfigurieren von MySQL 5.7.27

Lösung für das Datenasymmetrieproblem zwischen MySQL und Elasticsearch

Webdesigner ist ein geeignetes Talent

Lösung für den Konflikt zwischen zwei Registerkartennavigation in HTML

Der Unterschied zwischen HTML-Frame, Iframe und Frameset

Lösen Sie das Problem beim Laden der Vektorkartenquelle in OpenLayers 3

Lösung für die geringe Schreibeffizienz von unter AIX gemountetem NFS

Implementierung einer geplanten Sicherung in Mysql5.7

Detaillierte Erklärung der Rolle und des Prinzips des Schlüssels in Vue

So verwenden Sie rsync unter Linux

Tiefes Verständnis des Mechanismus des CSS-Hintergrund-Blend-Modus

Detaillierte Erläuterung des Vue-Entwicklungssortierungskomponentencodes

Einführung und Verwendungszusammenfassung der negativen Margenfunktion