Lösung für das Problem, dass der Z-Index in CSS3 nicht wirksam wird
|
Ich habe vor kurzem eine Kombination aus CSS3 und JS geschrieben und bin auf viele Fälle gestoßen, in denen der Z-Index nicht wirksam war: 1. Bei Verwendung des Z-Index hat das Element keine Positionierung (außer der statischen Positionierung). 2. Beim Positionieren wird der Z-Index des Elements nicht wirksam, da das untergeordnete Element des Elements später auftaucht und das Element überdeckt. Die Lösung besteht darin, den Z-Index des untergeordneten Elements, das das Element überdeckt, auf eine negative Zahl zu setzen. Beispiel für eine Dropdown-Box: 1. Beim Abdecken:
2. Setzen Sie den Z-Index der Dropdown-Box auf eine negative Zahl
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8">
<title>Unbenanntes Dokument</title>
<style type="text/css">
* {
Polsterung: 0;
Rand: 0;
Listenstil: keiner;
}
.alle {
Breite: 330px;
Höhe: 120px;
Überlauf: versteckt;
Hintergrund: URL (img/bg.jpg) keine Wiederholung;
Rand: 100px automatisch;
Zeilenhöhe: 30px;
Textausrichtung: zentriert;
Polsterung links: 10px;
Rand unten: 0;
}
.alle ul {
Position: relativ;
Höhe: 30px;
Breite: 100 %;
}
.alle ul li {
Breite: 100px;
Höhe: 30px;
Hintergrund: URL (img/libg.jpg);
schweben: links;
Rand rechts: 10px;
Position: relativ;
Cursor: Zeiger;
}
.alle ul ul {
Position: absolut;
links: 0;
oben: -90px;
/*Anzeige: keine; Es ist eine Frage eines Augenblicks*/
Übergang: alles 1en;
Deckkraft: 0;
/*Die spätere Box überdeckt die vorherige Box, auch wenn der Z-Index der vorherigen Box größer ist.
Sie können den Z-Index der nachfolgenden Box jedoch auf eine negative Zahl setzen*/
z-Index: -1;
}
.alle ul .lvTow {
oben: -90px;
Deckkraft: 0;
}
.alle ul .zeigen{
oben: 30px;
Deckkraft: 1;
}
</Stil>
</Kopf>
<Text>
<div Klasse="alle" id="Liste">
<ul>
<li>Menü der ersten Ebene<ul>
<li>Sekundäres Menü</li>
<li>Sekundäres Menü</li>
<li>Sekundäres Menü</li>
</ul>
</li>
<li>Menü der ersten Ebene<ul>
<li>Sekundäres Menü</li>
<li>Sekundäres Menü</li>
<li>Sekundäres Menü</li>
</ul>
</li>
<li>Menü der ersten Ebene<ul>
<li>Sekundäres Menü</li>
<li>Sekundäres Menü</li>
<li>Sekundäres Menü</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<Skript>
// Objekt abrufen. Objekt durchlaufen. Vorgang. Modul anzeigen. Modul ausblenden. Funktion List(id) { // Objekt abrufen. this.id = document.getElementById(id);
// ID-Wert abrufen this.lis = this.id.children[0].children; // Alle li im Menü der ersten Ebene abrufen
}
// Initialisierung initieren List.prototype.init = function() { // Alles li durchlaufen, um var that = this anzuzeigen und auszublenden;
für (var i = 0; i < this.lis.length; i++)
{
dies.lis[i].index = i;
dies.lis[i].onmouseover = Funktion() {
that.show(this.children[0]); //Zeig es }
dies.lis[i].onmouseout = Funktion() {
that.hide(this.children[0]); // verstecke es }
}
}
// Anzeigemodul List.prototype.show = function(obj) {
// obj.style.display = "block";
obj.className = "anzeigen";
}
//Modul ausblenden List.prototype.hide = function(obj) {
// obj.style.display = "keine";
obj.className = "lvTow";
}
var list = new List("list"); // Instanziiert ein Objekt namens list
Liste.init();
</Skript>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. |
<<: Detaillierte Erklärung der Stile in uni-app
>>: Eine kurze Erläuterung des Sperrbereichs der MySQL-Next-Key-Sperre
Artikel empfehlen
So führen Sie den Betrieb nach dem Verlassen des Docker-Containers weiter aus
Phänomen: Führen Sie ein Image aus, zum Beispiel ...
Beispiele und Zusammenfassung der In-, Out- und Inout-Parameter von gespeicherten MySQL-Prozeduren
Gespeicherte Prozeduren 1. Erstellen Sie eine ges...
MySQL-Konvertierung von Spalten in Zeilen, Methode zum Zusammenführen von Feldern (unbedingt lesen)
Datenblatt: Von Spalte zu Zeile: mit max(case whe...
Detaillierte Erklärung des Unterschieds zwischen Gerätebreite und Breite in CSS3-Medienabfragen
1.Gerätebreite Definition: Definiert die sichtbar...
So erstellen Sie schnell einen FTP-Dateidienst mit FileZilla
Um die Speicherung und den Zugriff auf Dateien zu...
Die Scroll-Ansicht des WeChat-Applets realisiert die Verknüpfung nach links und rechts
In diesem Artikel wird der spezifische Code für d...
Tutorial zur Installation der dekomprimierten Version von MySQL 5.7.18 unter Windows
1. Installationsprozess MySQL-Version: 5.7.18 1. ...
Im Vorstellungsgespräch wurde ich gefragt, ob select...for update die Tabelle oder die Zeile sperren würde.
Inhaltsverzeichnis verifizieren: Kombiniert mit d...
Eine kurze Diskussion über die Platzierung von Skripten in HTML
Früher dachte ich, dass Skripte überall in HTML p...
Detaillierte Analyse des Unterschieds zwischen Ref und Reactive in Vue3.0
Inhaltsverzeichnis Ref und Reaktiv Referenz Reakt...
Die vollständige Verwendung von Setup, Ref und Reactive in der Vue3-Kombinations-API
1. Erste Schritte mit setUp Stellen Sie kurz die ...
jQuery erzielt den Shutter-Effekt (mithilfe der Li-Positionierung)
In diesem Artikel wird der spezifische Code von j...
Zusammenfassung der Dockerfile-Maven-Plugin-Nutzungsanleitung
Inhaltsverzeichnis POM-Konfiguration Setting.xml-...
Datenbank löschen und weglaufen? So sichern Sie die MySQL-Datenbank mit xtraback
1. Die mysqldump-Sicherungsmethode verwendet eine...
Detaillierte Erläuterung der Idee zum Einrichten einer Abfangfunktion für die Anmeldeüberprüfung in Vue
Inhaltsverzeichnis 1. Lösung 2. Lassen Sie den Br...