So ändern Sie die feste Positionierung untergeordneter Elemente durch CSS3-Transformation in eine absolute Positionierung
|
In diesem Artikel wird die Methode vorgestellt, mit der die feste Positionierung von untergeordneten Elementen mithilfe der CSS3-Transformation in eine absolute Positionierung geändert werden kann. Ich möchte es mit Ihnen teilen und mir selbst eine Notiz hinterlassen, damit Sie leichter suchen können.
<!DOCTYPE html>
<html>
<Kopf>
<Stil>
Körper {
Hintergrund: #f60; // orange}
.übergeordnet {
Position: fest;
Breite: 300px;
Höhe: 300px;
rechts: 0;
oben: 0;
Hintergrund: #02bd00; // grün transform: translateX(0);
}
.Kind {
Position: fest;
links: 0;
rechts: 0;
oben: 0;
unten: 0;
Hintergrund: rgba(0,0,0,0,2); // schwarz transparent: Maske}
</Stil>
</Kopf>
<Text>
<div Klasse="übergeordnet">
<div Klasse="Kind"></div>
</div>
</body>
</html>Für Studierende, die noch nie mit dem Problem konfrontiert wurden, ist es nicht einfach, die Ursache des Problems zu finden. Hier ist ein Bild, das den Effekt zeigt (nur der grüne Teil ist maskiert, aber wir können denken, dass mit unserer Schrift alles in Ordnung ist.)
Wenn wir tatsächlich den Vollbildeffekt des Unterelements wünschen, müssen wir „transform: none“ festlegen.
Das Problem ist recht typisch: Wenn für das übergeordnete Element ein gültiges Transformationsattribut festgelegt wird, wird das untergeordnete Element als absolutes Element festgelegt, wodurch das untergeordnete Element dieselbe Größe wie das übergeordnete Element hat. Zu diesem Zeitpunkt sind sowohl offsetTop als auch offsetLeft des untergeordneten Elements 0, was Aufmerksamkeit erfordert. Dies ist das Ende dieses Artikels über die Verwendung von CSS3-Transformationen zum Ändern der festen Positionierung von Unterelementen in absolute Positionierungen. Weitere relevante Inhalte zu festen Unterelementen mit CSS3-Transformationen 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! |
<<: Serielle und parallele Operationen in JavaScript
>>: Eine detaillierte Einführung in die Bereitstellung von Seata Docker mit hoher Verfügbarkeit
Artikel empfehlen
Verwenden von CSS3 zum Erstellen von Header-Animationseffekten
Die offizielle Website von Netease Kanyouxi (http...
Eine kurze Diskussion über die integrierten Traversierungsmethoden von JS-Arrays und ihre Unterschiede
Inhaltsverzeichnis forEach() (ES6)-Methode map() ...
Detaillierte Untersuchung des Problems der Array-Deduplizierung in JavaScript
Inhaltsverzeichnis Vorwort 👀 Beginnen Sie mit der...
Detaillierte Erläuterung mehrerer Befehle in Linux zum Abrufen detaillierter Hardwareinformationen
In Linux-Systemen, insbesondere Serversystemen, i...
HTML erstellt eine einfache und schöne Anmeldeseite
Schauen wir uns das zunächst einmal an. HTML Quel...
So leiten Sie eine URL mit Nginx Rewrite um
Ich muss in letzter Zeit bei der Arbeit oft die N...
Lösung für 1067, wenn Mysql in Windows startet
Ich habe erst vor ein paar Tagen mit der Arbeit b...
Implementierungsmethode für horizontale und vertikale MySQL-Tabellenkonvertierungsvorgänge
Dieser Artikel veranschaulicht anhand von Beispie...
Diskussion über die numerische Begrenzung des OL-Elements im HTML-Dokument
Im Allgemeinen ist es unwahrscheinlich, dass Sie ...
Front-End-Leistungsoptimierung – die Schwachstellen, über die Front-End-Ingenieure sprechen müssen
Vorwort <br />Im vorherigen Artikel „Mein CS...
HTML-Auswahloption So treffen Sie die Standardauswahl
Wenn Sie einer Option das Attribut selected = &quo...
Das Konzept der MySQL-Tablespace-Fragmentierung und Lösungen für damit verbundene Probleme
Inhaltsverzeichnis Hintergrund Was ist Tablespace...
Detaillierte Erläuterung mehrerer Beispiele für Insert- und Batch-Anweisungen in MySQL
Inhaltsverzeichnis Vorwort 1.ignorieren einfügen ...
Verwendung des Linux-Stat-Befehls
1. Befehlseinführung Der Befehl stat wird verwend...
Ubuntu Docker-Installation in VMware (Containererstellung)
1. Mindmap 2. So bauen Sie einen Container 2.1 Vo...