Detaillierte Erklärung der Verwendung und des Unterschieds zwischen relativ und absolut in HTML
|
Der Unterschied zwischen relativ und absolut in HTML: Ehrlich gesagt ist HTML die einfachste Sprache der Welt. Es ist eine Tag-Sprache mit viel mehr englischen Wörtern in den Tags, aber sie sind alle regulär, wie z. B. text-align:center; fett text-weight:bold;. Es gibt jedoch immer noch einige Tags und Attribute, die schwer zu verstehen sind, wie z. B. das Attribut position, das eine Art der Positionierung darstellt. Der Code lautet wie folgt:
#div1{
Position: relativ;
Breite: 200px;
Höhe: 200px;
Hintergrundfarbe: blauviolett;
Rand links: 100px;
}Lassen Sie uns zunächst über die fünf allgemeinen Attributwerte der Position sprechen: --sticky: Position basierend auf der Scrollposition des Benutzers. Das heißt, die durch das Sticky-Tag definierte Beschriftung bewegt sich mit der Seite auf und ab, ihr Inhalt überschreitet den Bildschirm jedoch nicht, wie beispielsweise die mobile Navigationsleiste an der Seite der Website. --static: Der Standardwert für HTML-Elemente, das heißt, es erfolgt keine Positionierung und das Element erscheint im normalen Fluss. Oben, unten, links oder rechts haben keine Auswirkungen auf statisch positionierte Elemente. Dies hat den gleichen Effekt wie bei Nicht-Schreiben der Position. --fixed: Die Position des Elements ist relativ zum Browserfenster fixiert. Auch wenn das Fenster gescrollt wird, bewegt es sich nicht, genau wie ein Tapetenetikett, als ob es in den Bildschirm eingebettet wäre. Dies ist auf vielen Websites zu sehen, insbesondere auf Shopping-Websites. Die Navigationsleiste, die ruhig an der Seite der Seite liegt, ist mit fixiert implementiert. --relativ und absolut: Die Positionierung eines relativ positionierten Elements ist relativ zu seiner normalen Position. Die Stileinstellungen jedes Tags sind immer für sich selbst, wirken sich jedoch relativ auf andere Tags aus. Ein sehr wichtiger Punkt in HTML ist die verschachtelte Beziehung, d. h. es gibt Tags innerhalb von Tags. Betrachten wir zunächst die Auswirkungen auf derselben Ebene. Die beiden <div> sind Brüder.
Im obigen Fall ist die Position von div1 auf relativ eingestellt. Es ist ersichtlich, dass das kleine Quadrat neben dem großen Quadrat liegt, d. h. das kleine Quadrat ist relativ zum großen Quadrat, d. h. relativ: Die Positionierung von relativ positionierten Elementen lässt keine Überlappung von Elementen zu. Wie das Sprichwort sagt, bedeutet relativ, dass ich diese Position eingenommen habe und du an der nächsten Position stehen musst. Wenn wir die Position des großen Quadrats auf absolut ändern,
#div1{
Position: absolut;
Breite: 200px;
Höhe: 200px;
Hintergrundfarbe: blauviolett;
Rand links: 100px;
}Die Wirkung ist wie folgt:
Das kleine Quadrat springt nach oben, was bedeutet, dass beide Divs diese Position einnehmen können, nicht das große Quadrat. Absolute Positionierung ist absolute Positionierung relativ zum übergeordneten Tag. In diesem Fall ist das übergeordnete Tag <body></body> Erweiterungen: <div id="div1"> <div id="div2"></div> </div> Wenn das kleine Quadrat im großen Tag verschachtelt ist, bleiben die relativen und absoluten Effekte Ihrer Div1-Position unverändert. Der vorherige Effekt wird nur zwischen den Geschwister-Tags reflektiert.
Wenn Sie zu diesem Zeitpunkt den Stil von div2 festlegen, ist margin-left relativ zu div2. Wenn beispielsweise Ihre große Box 100 Pixel von links entfernt ist und der Stil Ihrer kleinen Box margin-left: 100 Pixel ist, ist die kleine Box in Wirklichkeit 200 Pixel von links entfernt.
#div1{
Position: relativ;
Breite: 200px;
Höhe: 200px;
Hintergrundfarbe: blauviolett;
Rand links: 100px;
}
#div2{
Rand links: 100px;
Position: absolut;
Breite: 50px;
Höhe: 50px;
Hintergrundfarbe: rot;
}
Zusammenfassung: Relativ positionierte Elemente werden häufig als Containerblöcke für absolut positionierte Elemente verwendet. Wenn Tags verschachtelt sind, sind die Positionsstileinstellungen von untergeordneten Tags relativ zum übergeordneten Tag. Wenn Sie Quick-Tags verstehen möchten, müssen Sie das HTML-Boxmodell verstehen. Dies ist das Ende dieses Artikels über die Verwendung und Unterschiede von relativem und absolutem HTML. Weitere relevante relative und absolute HTML-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: So verwenden Sie vue3+TypeScript+vue-router
>>: Mausposition in CSS abbilden und Seitenelemente durch Mausbewegungen steuern (Beispielcode)
Artikel empfehlen
Eine detaillierte Erklärung der überlappenden und weichen Farbanpassungsmethode bei der Farbanpassung von Webseiten
In diesem Artikel gibt es keine Spitzfindigkeiten,...
Eine kurze Analyse von Unterabfragen und erweiterten Anwendungen in der MySql-Datenbank
Unterabfrage in der MySql-Datenbank: Unterabfrage...
Einführung in 10 Online-Entwicklungstools für Webdesign
1. Online-Textgenerator BlindTextGenerator: Für D...
So verwenden Sie die HTML 5 Drag & Drop-API in Vue
Die Drag & Drop-API fügt ziehbare Elemente zu...
Docker-Lösung zum Anmelden ohne Root-Rechte
Wenn Sie den Docker-Befehl zum ersten Mal verwend...
ReactJs-Grundlagen-Tutorial - Essential Edition
Inhaltsverzeichnis 1. Einführung in ReactJS 2. Ve...
Lösung für MySQL 8.0 kann nicht gestartet werden 3534
Der MySQL 8.0-Dienst kann nicht gestartet werden ...
MySQL 4-Methoden zum Importieren von Daten
1. MySQL-Befehl importieren Die Importsyntax des ...
Welche Szenarien sind für JS-Pfeilfunktionen nicht geeignet?
Inhaltsverzeichnis Überblick Definieren von Metho...
Die Verwendung und der Unterschied zwischen JavaScript-Pseudo-Array und Array
Pseudo-Arrays und Arrays In JavaScript sind mit A...
Analyse und Neugestaltung von Musikplayer-Apps (Anwendungssoftware) So gestalten Sie eine ansprechende Musikplayer-Oberfläche
Ich habe mich schon immer für drahtlose Interakti...
So konfigurieren Sie NAS unter Windows Server 2019
Vorwort Dieses Tutorial installiert die neuste Ve...
Über den Unterschied zwischen der Überprüfung von Elementen und der Anzeige des Quellcodes einer Webseite
Ich weiß nicht, ob Sie bemerkt haben, dass beim Ö...
Beispiel zum Erstellen eines Datenbanknamens mit Sonderzeichen in MySQL
Vorwort In diesem Artikel wird erklärt, wie Sie i...
Lernen Sie MySQL Index Pushdown in fünf Minuten
Inhaltsverzeichnis Vorwort Was ist Index-Pushdown...