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
Unterschiede zwischen MySQL CHAR und VARCHAR beim Speichern und Lesen
Einführung Kennen Sie wirklich den Unterschied zw...
Wird der veraltete Docker durch Podman ersetzt?
Das Kubernetes-Team hat vor Kurzem angekündigt, d...
Eine kleine Frage zur Ausführungsreihenfolge von SQL in MySQL
Ich bin heute bei der Arbeit auf ein SQL-Problem ...
Sieben Lösungen für klassische verteilte Transaktionen zwischen MySQL und Golan
Inhaltsverzeichnis 1. Grundlegende Theorie 1.1 Tr...
js realisiert die Bildschneidefunktion
In diesem Artikelbeispiel wird der spezifische Co...
So wählen und verwenden Sie PNG, JPG und GIF als Web-Bildformate
Welches dieser Formate (GIF, PNG oder JPG) sollte...
MySQL-Datenbank Daten laden, vielfältige Verwendungsmöglichkeiten
Inhaltsverzeichnis Vielfältige Einsatzmöglichkeit...
So verwenden Sie die ES6-Klassenvererbung, um einen wunderschönen Balleffekt zu erzielen
Inhaltsverzeichnis einführen Implementierungsschr...
Die Fallstricke bei der Beurteilung von NULL-Werten in MySQL
Inhaltsverzeichnis Vorwort MySQL-Fall mit Syntax:...
Eine kurze Analyse des Zeitproblems von MySQL
Der Standardzeittyp (Datum/Uhrzeit und Zeitstempe...
Implementierung der Clusterkonstruktion im Docker Redis5.0-Cluster
Systemumgebung: Ubuntu 16.04LTS In diesem Artikel...
HTML-Formular_PowerNode Java Academy
1. Formular 1. Die Rolle des Formulars HTML-Formu...
Detaillierte Erklärung des Hintergrund-Positionsprozentsatzprinzips
Als ich heute jemandem beim Anpassen des Codes ha...
Domänenübergreifende Probleme bei der Trennung von Front-End und Back-End von Vue+SpringBoot
Bei der getrennten Entwicklung von Front-End und ...
MySQL query_cache_type-Parameter und Verwendungsdetails
Der Zweck der Einrichtung eines MySQL-Abfragecach...