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
HTML-Hyperlink ein Tag_Powernode Java Academy
Jeder, der HTML studiert oder verwendet hat, soll...
So ändern Sie das Anfangskennwort eines Benutzers in mysql5.7
Wenn Benutzer MySQL-Datenbanken zum ersten Mal in...
So sichern Sie MySQL-Kontoinformationen elegant
Vorwort: Ich bin kürzlich auf das Problem der Ins...
So zeigen Sie die Zeitzone in MySQL an und ändern sie
Heute habe ich festgestellt, dass ein Programm ei...
Lernprogramm zur Verwendung von HTML-Formular-Tags
Mithilfe von HTML-Formularen können verschiedene ...
JavaScript implementiert die Klick-Umschaltfunktion
In diesem Artikelbeispiel wird der spezifische Ja...
Verwendung des Vuex-Namespace
Inhaltsverzeichnis Da Vuex einen einzelnen Zustan...
Beschreiben Sie kurz die Verwendung und Beschreibung des MySQL-Primärschlüssels und des Fremdschlüssels
Inhaltsverzeichnis 1. Fremdschlüsseleinschränkung...
Tutorial zur Verwendung von Docker Compose zum Erstellen von Confluence
Dieser Artikel verwendet die Lizenzvereinbarung „...
So implementieren Sie Zeilenumbrüche im Texteingabebereich von Textarea
Wenn Sie den Text im Textarea-Eingabebereich umbre...
Speicher-Engine und Protokollbeschreibung basierend auf MySQL (ausführliche Erklärung)
1.1 Einführung in Speicher-Engines 1.1.1 Dateisys...
Vue realisiert den Prozentbalkeneffekt
In diesem Artikel wird der spezifische Code von V...
Referenzieren Sie SVG-Bilder in CSS, um den Implementierungscode für dynamische Farbumschaltung zu unterstützen
Wenn wir ein SVG-Bild zur Anzeige hinzufügen, erh...
Detaillierte Erläuterung verschiedener Möglichkeiten zum Exportieren von Daten in Mysql
Es gibt viele Gründe für den Export von MySQL-Dat...
Tutorial zum Upgrade, zur Installation und Konfiguration des Supervisors auf Centos 6.5
Vorstellung des Vorgesetzten Supervisor ist ein i...