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
Beispielcode für mehrere Elementtabellen, um synchrones Scrollen zu erreichen
Element UI implementiert mehrere Tabellen, die gl...
JS implementiert Anforderungsdispatcher
Inhaltsverzeichnis Abstraktion und Wiederverwendu...
Zusammenfassung der Probleme beim Hinzufügen, Löschen, Ändern und Abfragen von MySQL-Tabellen, -Spalten und -Datenbanken
Im Folgenden habe ich einige grundlegende SQL-Ken...
Detaillierte Erklärung der Lösung für das Problem der zu kleinen Ubuntu-Systemschnittstelle in vmware14Pro
1. Betriebsumgebung vmware14pro Ubuntu 16.04LTS 2...
Detailliertes Installationstutorial für die MySQL-Zip-Archivversion (5.7.19)
1. Laden Sie die Zip-Archivversion von der offizi...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17 unter Windows 10
In diesem Artikel erkläre ich ausführlich, wie ma...
jQuery-Plugin zum Erzielen eines Karusselleffekts
Jeden Tag ein jQuery-Plugin - jQuery-Plugin zur I...
Erstellen eines sekundären Menüs mit JavaScript
In diesem Artikelbeispiel wird der spezifische Ja...
Detaillierte grafische und textliche Anweisungen zur Installation von MySQL 5.7.20 unter Mac OS
Installieren von MySQL 5.7 aus TAR.GZ auf Mac OS ...
Einige Zusammenfassungen von Fällen zur Konvertierung von HTML in PDF (mehrere Bilder empfohlen)
Aus beruflichen Gründen habe ich vor Kurzem einig...
Detaillierter Prozess zur Installation von Presto und zum Verbinden von Hive in Docker
1. Einleitung Presto ist eine Open-Source-SQL-Abf...
So installieren Sie Theano und Keras auf einem Ubuntu-System
Hinweis: Das System ist Ubuntu 14.04LTS, ein 32-B...
So implementieren Sie die Vervollständigung leerer Zellen in HTML-Tabellen
Als ich mir selbst die Webentwicklung beibrachte,...
Einführung in die grundlegenden TypeScript-Typen
Inhaltsverzeichnis 1. Grundtypen 2. Objekttyp 2.1...
Vue ruft die Computerkamera auf, um die Fotofunktion zu realisieren
In diesem Artikelbeispiel wird der spezifische Co...