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

Detaillierte Erläuterung der grundlegenden Befehle des Docker-Ausführungsprozesses und des Images

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

Detaillierte Erläuterung der grundlegenden Befehle des Docker-Ausführungsprozesses und des Images

Detaillierte Erklärung des Problems bei der Kombination von CSS-Ellipsen und -Auffüllungen

Zweistündiges Docker-Einführungstutorial

Websocket+Vuex implementiert eine Echtzeit-Chat-Software

Analysieren des MySQL-Binärprotokolls

Die Fallstricke bei der Bereitstellung von Angular-Projekten in Nginx

Ein tiefer Einblick in die MySQL InnoDB-Speicher-Engine

Zusammenfassung der MySQL-Indexkenntnisse

Vue+Flask realisiert Videosynthesefunktion (Drag & Drop-Upload)

Node+Socket realisiert einfache Chatroom-Funktion

Artikel empfehlen

Details zum Überschreiben von Prototypmethoden in JavaScript-Instanzobjekten

Detaillierter Prozess zum Kompilieren und Installieren von Storm auf dem Kylin V10-Server

Detaillierte Erklärung zum Erstellen geplanter MySql-Aufgaben in Navicat

10 Fähigkeiten, die Frontend-Entwickler millionenschwer machen

Teilen Sie 12 häufig verwendete Loader in Webpack (Zusammenfassung)

So erstellen Sie einen SSH-Dienst basierend auf einem Golang-Image in Docker

Installieren Sie Python 3.6 unter Linux und vermeiden Sie Fallstricke

So schreiben Sie ein MySQL-Sicherungsskript

Ein Bugfix für Tomcats automatisches Herunterfahren

Der Inhalt der Tabelle in HTML wird horizontal und vertikal in der Mitte angezeigt

Kompatibilitätsprobleme mit CSS3-Farbverlaufshintergründen

Lösen Sie das Problem der Docker-Protokollmontage

Detaillierte Erklärung des Linux Namespace-Benutzers

Natives JS zur Implementierung der Drag-Position-Vorschau

Detaillierte Erläuterung des kostenlosen MySql 5.7.17-Installationskonfigurationstutorials