Heim Web-Frontend CSS-Tutorial Lösung für das Levelproblem, das relativ absolut nicht durchbrechen kann_Erfahrungsaustausch

Lösung für das Levelproblem, das relativ absolut nicht durchbrechen kann_Erfahrungsaustausch

May 16, 2016 pm 12:05 PM
css

Wenn wir LI auf position:relative; set span auf position:absolute; setzen, werden wir feststellen, dass der Z-Indexwert von SPAN immer unter dem übergeordneten Wert dahinter liegt.

Ich erinnere mich, dass vor einiger Zeit jemand in der Gruppe eine Frage gestellt hat, die wirklich alle verwirrt hat:

<ul>   
<li>第一块</li>   
<li><span>第二块</span></li>   
<li>第三块</li>   
<li>第四块</li>   
<li>第五块</li>   
</ul>
Nach dem Login kopieren

If we set LI to position:relative ;Set span to position:absolute; Dann werden wir feststellen, dass der Z-Index-Wert von SPAN, egal wie hoch er eingestellt ist, immer unter dem übergeordneten Wert dahinter liegt.

*{margin:0; padding:0; list-style:none;}   
li {width:100px; height:100px; margin:0 5px 0 0; background:#000; float:left; position:relative; z-index:1;}   
li span {width:200px; height:100px; background:#c00; position:absolute; top:0; left:100px; z-index:1000;}
Nach dem Login kopieren

Es ist einfach, unsere Kinder zu finden, indem Sie es ausprobieren. Wenn der Z-Index-Wert 1000 erreicht, werden alle Kinder unter dem übergeordneten Element abgelegt. Ich habe lange darüber nachgedacht und denke, dass das grundlegende Problem darin besteht, die gleiche Position festzulegen: relativ/absolut; die Ebene zwischen Beschriftungen derselben Ebene kann durch den Z-Index nicht überschritten werden. In unserem Beispiel oben ist die Ebene des ersten LI immer kleiner als die Ebene des nächsten LI, daher legen wir position:absolute; für die untergeordneten Elemente in LI fest, was einen sehr hohen Z-Index-Wert ergibt.

Vielleicht denken Sie so darüber nach: Wäre es nicht schön, position:relative; für den LI mit span festzulegen? Sehr wahr. Wenn kein anderer LI position:relative; festlegt, kann das von uns benötigte untergeordnete Element über dem gesamten Inhalt schweben. Was aber, wenn tatsächlich span in allen LIs erforderlich ist und die Attribute gleich sein müssen? Natürlich brauchen wir diesen Effekt nicht unbedingt. Aber wir müssen einen solchen Effekt haben: Alle Kinder werden ausgeblendet, erscheinen bei einer Mausreaktion und schweben über allen Inhalten. Wir müssen wissen, dass dies tatsächlich Kopfschmerzen bereitet, denn wie wir oben gesehen haben, werden die untergeordneten Elemente bei der Anzeige unter die Bezeichnung des nächsten übergeordneten Elements gedrückt. Implementieren wir den Positionierungseffekt dieser Mausantwort:

<ul>   
<li><a href="" title=""><span>第一块</span></a></li>   
<li><a href="" title=""><span>第二块</span></a></li>   
<li><a href="" title=""><span>第三块</span></a></li>   
<li><a href="" title=""><span>第四块</span></a></li>   
<li><a href="" title=""><span>第五块</span></a></li>   
</ul>
Nach dem Login kopieren

Wir verwenden das verknüpfte Mausereignis, um den Anzeige- und Ausblendeffekt abzuschließen:

*{margin:0; padding:0; list-style:none;}   
li {height:100px; margin:0 5px 0 0; float:left; width:100px;}   
li a {position:relative; z-index:1; display:block; height:100px; width:100px; background:#000;}   
li a:hover {background:#000000;}   
li span {display:none;}   
li a:hover span {display:block; background:#c00; width:200px; height:200px; position:absolute; top:0; left:100px; z-index:1000;}
Nach dem Login kopieren

Wir legen a als position :relative; fest. Auf diese Weise werden seine untergeordneten Elemente basierend auf der oberen linken Ecke des übergeordneten Elements als Koordinatenursprung positioniert. Dann legen wir die spezifischen Form- und Positionierungseigenschaften des Bereichs fest und blenden ihn dann aus. Anschließend verwenden wir den Pseudo-class:hover von A, um span zu aktivieren. Wenn wir uns die Ergebnisse ansehen, sehen wir, dass alles, was oben sein sollte, jetzt unten ist. Wie lösen wir dieses Problem? Tatsächlich ist es mit CSS unmöglich, einen Durchbruch zu erzwingen. Wir überlegen also, ob wir dafür sorgen können, dass das übergeordnete Tag, das nicht ausgelöst wurde, nicht das Attribut „position:relative“ hat es wird ausgelöst? Diesem übergeordneten Element einen solchen Wert zuweisen? Tatsächlich kann dieser Gedanke im Grunde alle Probleme lösen:

*{margin:0; padding:0; list-style:none;}   
li {height:100px; margin:0 5px 0 0; float:left; width:100px;}   
li a {display:block; height:100px; width:100px; background:#000;}   
li a:hover {position:relative; z-index:1; }   
li span {display:none;}   
li a:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; }
Nach dem Login kopieren

Wir müssen nur das Attribut von a:hover auf position:relative; setzen, sodass A nur dann aktiviert wird, wenn die Maus ausgelöst wird ein relativ positioniertes Attribut zugewiesen werden. Damit ist das Problem der Blockierung durch andere übergeordnete Tags gelöst.

Wenn Ihnen Browser wie IE5 nichts ausmachen, können wir den Code natürlich auch vereinfachen:

<ul>   
<li><span>第一块</span></li>   
<li><span>第二块</span></li>   
<li><span>第三块</span></li>   
<li><span>第四块</span></li>   
<li><span>第五块</span></li>   
</ul>
Nach dem Login kopieren

CSS kann wie folgt geändert werden:

*{margin:0; padding:0; list-style:none;}   
li {height:100px; margin:0 5px 0 0; float:left; width:100px; background:#000;}   
li:hover {position:relative; z-index:1;}   
li span {display:none;}   
li:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; }
Nach dem Login kopieren

Zusätzlich:
Der Artikel „Position:relativ/absolut kann nicht durchbrechen“ wurde vor einiger Zeit veröffentlicht. Als ich ihn in den letzten Tagen noch einmal las, stellte ich fest, dass dies nicht der Fall war gründlich und hat nicht auf den Kernpunkt hingewiesen. Deshalb möchte ich hier eine besondere Ergänzung vornehmen, in der Hoffnung, dass die Ebenen in Position klarer und anschaulicher erklärt werden können.

Wir alle wissen, dass die Position vier verschiedene Werte hat, nämlich: statisch absolut |. Dies wird im „CSS2 Chinese Manual“ von Su Yu erklärt: statisch: keine spezielle Positionierung, das Objekt folgt den HTML-Positionierungsregeln absolut: Ziehen Sie das Objekt aus dem Dokumentfluss, verwenden Sie links, rechts, oben, unten und andere Attribute, um es absolut zu machen Position. Und seine Kaskadierung wird durch das Z-Index-Attribut definiert. Zu diesem Zeitpunkt hat das Objekt keine Ränder, aber es gibt immer noch Abstände und Ränder; relativ: Das Objekt kann nicht gestapelt werden, sondern wird im normalen Dokumentfluss basierend auf Attributen wie links, rechts, oben, unten usw. versetzt .; behoben: IE5.5 und NS6 sind noch nicht verfügbar. Diese Eigenschaft wird nicht unterstützt.

Um aber die Stapelposition eines Objekts zu ändern, benötigen Sie eine weitere CSS-Eigenschaft: z-index. Dieser Z-Index ist jedoch nicht allmächtig. Er wird durch die HTML-Codeebene eingeschränkt. Der Z-Index kann seine Wirkung nur auf HTML derselben Ebene widerspiegeln. Hier muss angegeben werden, dass der Z-Index nur verwendet werden kann, wenn der Positionswert des Objekts relativ/absolut ist. Im Folgenden geben wir einige Beispiele, um die Eigenschaften von Ebenen zu erläutern:

<p id="box_1">   
<p id="a">这是第一个块</p>   
<p id="b">这是第二个块</p>   
</p>
Nach dem Login kopieren

Für den obigen HTML-Code müssen wir auch ein CSS schreiben, um ihn zu definieren:

#a,#b {position:absolute; width:300px; height:100px; }   
#a {z-index:10; left:0; top:0; background:#000; }   
#b {z-index:1; left:20px; top:20px; background:#c00; }
Nach dem Login kopieren

Dies ist am häufigsten In diesem Fall kann die Stapelebene von #a und #b über den Z-Index festgelegt werden. Dies wird nicht gefragt. Unter welchen Umständen treten Probleme auf? Schauen wir uns ein weiteres Beispiel an:

<p id="box_1">   
<p id="a">这是第一个块</p>   
</p>   
<p id="box_2">   
<p id="b">这是第二个块</p>   
</p>
Nach dem Login kopieren

Schreiben Sie ein weiteres CSS basierend auf dieser Struktur:

#box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}   
#a, #b {position:absolute; width:100px; height:300px; }   
#a {background:#c00; z-index:100; }   
#b {background:#0c0; z-index:1; left:50px;}
Nach dem Login kopieren

这时候我们看,不论#a设为多大的值,他都无法超过#b,所以说z-index是无法冲破HTML的等级的,他必需是要同等级的状态下才可以发挥威力.那么如何解决这个问题呢?我可以反过来想,堂兄弟之间的顺序不能被重组,何不把父辈的等级做一次重组呢?所以我们把#box_1的CSS中加入一个z-index:100; 在#box_2的CSS中加入z-index:1;这样再看一下效果:

#box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}   
#box_1 {z-index:100;}   
#box_2 {z-index:1;}   
#a, #b {position:absolute; width:100px; height:300px; }   
#a {background:#c00; }   
#b {background:#0c0; left:50px;}
Nach dem Login kopieren
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So verwenden Sie die Bootstrap -Taste So verwenden Sie die Bootstrap -Taste Apr 07, 2025 pm 03:09 PM

Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen

So ändern Sie Bootstrap So ändern Sie Bootstrap Apr 07, 2025 pm 03:18 PM

Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.

So richten Sie das Framework für Bootstrap ein So richten Sie das Framework für Bootstrap ein Apr 07, 2025 pm 03:27 PM

Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.

So fügen Sie Bilder auf Bootstrap ein So fügen Sie Bilder auf Bootstrap ein Apr 07, 2025 pm 03:30 PM

Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.

So sehen Sie das Datum der Bootstrap So sehen Sie das Datum der Bootstrap Apr 07, 2025 pm 03:03 PM

ANTWORT: Sie können die Datumsauswahlkomponente von Bootstrap verwenden, um Daten auf der Seite anzuzeigen. Schritte: Stellen Sie das Bootstrap -Framework ein. Erstellen Sie ein Eingangsfeld für Datumsauswahl in HTML. Bootstrap fügt dem Selektor automatisch Stile hinzu. Verwenden Sie JavaScript, um das ausgewählte Datum zu erhalten.

So schreiben Sie geteilte Zeilen auf Bootstrap So schreiben Sie geteilte Zeilen auf Bootstrap Apr 07, 2025 pm 03:12 PM

Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.

So überprüfen Sie das Bootstrap -Datum So überprüfen Sie das Bootstrap -Datum Apr 07, 2025 pm 03:06 PM

Befolgen Sie die folgenden Schritte, um Daten in Bootstrap zu überprüfen: Führen Sie die erforderlichen Skripte und Stile ein. Initialisieren Sie die Datumsauswahlkomponente; Legen Sie das Data-BV-Datatattribut fest, um die Überprüfung zu ermöglichen. Konfigurieren von Überprüfungsregeln (z. B. Datumsformate, Fehlermeldungen usw.); Integrieren Sie das Bootstrap -Verifizierungs -Framework und überprüfen Sie automatisch die Datumseingabe, wenn das Formular eingereicht wird.

So setzen Sie die Bootstrap -Navigationsleiste So setzen Sie die Bootstrap -Navigationsleiste Apr 07, 2025 pm 01:51 PM

Bootstrap bietet eine einfache Anleitung zum Einrichten von Navigationsleisten: Einführung der Bootstrap -Bibliothek zum Erstellen von Navigationsleistencontainern Fügen Sie Markenidentität hinzu. Erstellen Sie Navigationslinks. Hinzufügen anderer Elemente (optional) Anpassungsstile (optional).

See all articles