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
Verwenden Sie das Firebug-Tool, um die Seite auf dem iPad zu debuggen
Wie debuggt man eine Seite auf dem iPad? Wenn Sie ...
Die perfekte Lösung für das MySql-Versionsproblem sql_mode=only_full_group_by
1. Überprüfen Sie sql_mode wählen Sie @@sql_mode ...
CSS zum Erzielen einer Schließen-Schaltfläche zum Vergrößern und Verkleinern (Beispielcode)
Dieser Effekt tritt am häufigsten auf unserer Bro...
Vue verwendet Mixins zur Optimierung von Komponenten
Inhaltsverzeichnis Mixins-Implementierung Zusamme...
Der derzeit bessere Weg, eine Auswahlliste mit allen Optionen zu erstellen, wenn diese ausgewählt/fokussiert sind
Während der Entwicklung bin ich auf eine solche An...
Lösung für das Problem der ungültigen Zeilenhöheneinstellung in CSS
Über die ungültige Zeilenhöheneinstellung in CSS ...
GDB-Debugging, MySQL-Kompilierung und Installation des tatsächlichen Kampfquellcodes
Quellcode herunterladen Git-Klon https://github.c...
CentOS7.5-Installationstutorial für MySQL
1. Überprüfen Sie zunächst, ob auf dem System MyS...
Detaillierte Erläuterung des Vue Lazyload-Beispiels für verzögertes Laden von Bildern
Dokumentation: https://github.com/hilongjw/vue-la...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.25
Das neueste Download- und Installationstutorial f...
Beheben des Problems, dass Notizendetails auf Webseiten grau werden
1. Wenn im Internet Explorer die relative Position...
JavaScript zum Erzielen eines Zeitlupenanimationseffekts
In diesem Artikel wird der spezifische Code für J...
MySQL 8.0.17 winx64 (mit Navicat) manuelle Konfiguration Version Installation Tutorial Diagramm
1. Download-Adresse: mysql-8.0.17-winx64 Herunter...
Detaillierte Einführung in das CSS-Prioritätswissen
Bevor wir über die CSS-Priorität sprechen, müssen...
Sieben Möglichkeiten zur Implementierung der Array-Deduplizierung in JS
Inhaltsverzeichnis 1. Verwenden von Set()+Array.f...