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

Lösung für das Problem, dass beim Hinzufügen eines Tomcat-Containers zu Docker kein Zugriff auf die Homepage möglich ist

Lösung für das Problem, dass Elemente mit negativem Z-Index nicht angeklickt werden können

Lösung für das Problem, dass beim Hinzufügen eines Tomcat-Containers zu Docker kein Zugriff auf die Homepage möglich ist

WeChat-Applet-Canvas implementiert Signaturfunktion

JS implementiert die Drag- und Platzhalterfunktionen von Elementen

Detaillierte Erklärung der Bedeutung und des Unterschieds zwischen MySQL-Zeilensperren und Tabellensperren

MySQL etabliert eine effiziente Indexbeispielanalyse

Einige Probleme, die durch inkonsistente MySQL-Kodierung verursacht werden können

Handbuch zur MySQL-Volltextindizierung

Detaillierte Erläuterung der Angular-Datenbindung und ihrer Implementierung

Zusammenfassung häufig verwendeter Befehle für die Einreichung von Docker-Wettbewerben

Beispielcode zur Implementierung von Zeitleisten- und Animationseffekten mit JavaScript (Front-End-Komponentenbildung)

Artikel empfehlen

Verwenden Sie HTML, um eine einfache E-Mail-Vorlage zu schreiben

Methode zum Schreiben von bedingten Kommentaren und Beispielcode

MySQL-Triggerprinzip und Analyse von Anwendungsbeispielen

Erfahren Sie in zehn Minuten, wie Sie Microservices mit Docker bereitstellen

Detaillierte Erklärung des Unterschieds zwischen Uniapp und Vue

Detaillierte Erklärung zur Verwendung der ziehbaren Textfeldkomponente von Vue.js

Detaillierte Erläuterung der Position der CSS-Sticky-Positionierung: Sticky-Problemgrube

Linux Überprüfen Sie den Installationsort der Software einfache Methode

Mehrere Gründe, HTML nicht zu komprimieren

So konfigurieren Sie Linux für die Verwendung der LDAP-Benutzerauthentifizierung

Grafisches Tutorial zur Installation und Konfiguration der MySQL 5.7.18 Zip-Version (Win7)

So implementieren Sie die jQuery-Karussellfunktion

Was sind die Vorteile einer semantischen HTML-Struktur?

Methode und Einführung der Tabellenindexdefinition in MySQL

So verwenden Sie Vue3-Mixin