Lösung für das Problem, dass Elemente mit negativem Z-Index nicht angeklickt werden können
|
Ich habe kürzlich an einer Popup-Anzeige gearbeitet. Da für die Standardseite kein Z-Index festgelegt ist, habe ich festgestellt, dass Elemente mit einem negativen Z-Index nicht angeklickt werden können. Die Lösung besteht darin, den Z-Index der Popup-Anzeige auf 1 zu setzen und den Z-Index anderer Elemente zu erhöhen. Nehmen wir an, es gibt eine solche Anforderung:  Kopfzeile und Hauptbereich sind bereits vorhanden. Jetzt müssen wir der Seite ein Hintergrundbild hinzufügen. Die Hintergrundebene muss sich unter dem Hauptbereich befinden, aber der Teil außerhalb des Hauptbereichs ist anklickbar und stellt einen Link dar. Nach kurzem Nachdenken wurde mir klar, dass dies mit einem Hintergrundbild nicht erreicht werden konnte, da Hintergrundbilder nicht anklickbar sind. Zwar kann man mit js die Body-Klicks überwachen und dann anhand der Klickposition feststellen, ob auf das Hintergrundbild geklickt wurde, das ist aber zu umständlich. Daher habe ich beschlossen, eine Ebene unter dem Hauptbereich hinzuzufügen und den Z-Index auf -1 festzulegen. Das Bild wird als Hintergrundbild von bgImg festgelegt. Der Code lautet wie folgt: <!DOCTYPE html>
<html>
<Kopf>
<Stil>
.bgImg {Position: absolut; Z-Index: -1; Hintergrund: URL(...) keine Wiederholung im Zentrum;}
</Stil>
</Kopf>
<Text>
<Kopfzeile></Kopfzeile>
<div Klasse="bgImg"></div>
<div Klasse="Haupt"><div>
</body>
</html>Es stellt sich jedoch heraus, dass nach dieser Einstellung nicht auf bgImg geklickt werden kann und die Handform beim Hovern nicht angezeigt wird, da das Element mit einem negativen Z-Index unter der Body-Ebene platziert wird, sodass die Klick- und Hover-Ereignisse von der Body-Ebene abgedeckt werden. Lösung: 1. Setze den Z-Index auf 0. Setze den Hauptbereich auf position:relative; Z-Index: 1; Dadurch stellst du sicher, dass die Hintergrundebene den Hauptbereich nicht beeinflusst und der Teil außerhalb des Hauptbereichs ebenfalls angeklickt werden kann.  2. Die Struktur ist dieselbe wie 1, aber die Implementierungsmethode ist unterschiedlich. Verwenden Sie statt der Position einen negativen unteren Rand: Hintergrundebene {height: 500px; margin-bottom: -500px;} Im Hauptbereich sind keine Änderungen erforderlich. Das Prinzip besteht darin, dass ein negativer unterer Rand die Elemente darunter nach oben zieht und die Höhe der Hintergrundebene = Höhe + obere Polsterung + untere Polsterung + obere Rahmenbreite + untere Rahmenbreite + oberer Rand + unterer Rand = 0 ist. (Nicht gesetzte Eigenschaften werden in reset.css alle auf 0 zurückgesetzt.) Die Hintergrundebene nimmt also nicht den Platz des Dokumentflusses ein und kann weiterhin angeklickt werden. |
<<: Tipps zum Implementieren mehrerer Rahmen in CSS
>>: Detaillierte Erklärung des Unterschieds zwischen Cellspacing und Cellpadding in der Tabelle
Artikel empfehlen
Vergleich der von der MySQL-Datenbank unterstützten Speicher-Engines
Inhaltsverzeichnis Speicher-Engine Von MySQL unte...
Beispiele für den Import und Export von MySQL-Tabellendaten
Dieser Artikel beschreibt die Import- und Exportv...
Analyse mehrerer Situationen, in denen der MySQL-Index fehlschlägt
1. Prinzip des besten linken Präfixes – Wenn mehr...
Vue ermöglicht das Hinzufügen von Wasserzeichen zu hochgeladenen Bildern (aktualisierte Version)
Das Vue-Projekt implementiert eine aktualisierte ...
Erstellen und Verwenden von Docker-Datenvolumencontainern
Ein Datenvolumencontainer ist ein Container, der ...
Reines CSS zum Erstellen der Wassertropfen-Animationsschaltfläche im Material Design
Vorwort Solche Spezialeffekte sollte man oft sehe...
Detaillierte Erläuterung des Konfigurationsprozesses des Docker-Container-Netzwerkports
Netzwerk-Ports freigeben Tatsächlich gibt es in D...
Eine kurze Analyse des MySQL-Index
Ein Datenbankindex ist eine Datenstruktur, deren ...
JavaScript-Verlaufsobjekt erklärt
Inhaltsverzeichnis 1. Routennavigation 2. API zur...
Detaillierter Prozess für den Einstieg mit Docker Compose HelloWorld
Voraussetzungen Compose ist ein Tool zum Orchestr...
Die MySQL-Datenbankmigration exportiert und importiert schnell große Datenmengen
Die Datenbankmigration ist ein Problem, auf das w...
So verwenden Sie den Yum-Befehl
1. Einführung in yum Yum (vollständiger Name Yell...
Detaillierte Erklärung des Unterschieds zwischen Uniapp und Vue
Inhaltsverzeichnis 1. Einfaches Seitenbeispiel 2....
Lösung für das Problem, dass der Eintrag bei der Installation von mysql5.7.18 nicht gefunden werden kann
Bei der Installation von mysql5.7.18 ist folgende...
Das Vue-Projekt realisiert das Zeichnen eines Wasserzeichens in einem bestimmten Bereich
In diesem Artikel erfahren Sie, wie Sie mit Vue e...