Position:relativ/absolutDas Level, das nicht gebrochen werden kann_Erfahrungsaustausch

Hinweis: Die Beispiele in diesem Artikel werden möglicherweise nicht unter IE5.x angezeigt. Bitte verwenden Sie zum Debuggen IE6, IE7, Firefox, Opera und andere!
Ich erinnere mich, dass vor einiger Zeit jemand in der Gruppe eine Frage gestellt hat, die wirklich nicht jeder verstanden hat:

Code kopieren Der Code lautet wie folgt:

Der erste Block/span>Der Dritter Block

• Der vierte Block
/li> Egal wie hoch er eingestellt ist, er liegt immer unter dem übergeordneten Block dahinter.




Code kopieren

Der Code lautet wie folgt:

*{margin:0; padding:0 ; list- style:none;} li {width:100px; height:0 5px 0 0; float:left; >li span {width:200px; background:#c00; top:00;z-index:1000;}

Erster Block <meta http-equiv="Content-Type" content="text/html; charset=utf-8">Zweiter Block<meta http-equiv="Content-Language" content="zh-CN"> <title> </title>Dritter Block<style type="text/css"> /*<![CDATA[*/ *{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:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000;} /*]]>*/ </style> Der vierte Block <ul>Fünfter Block<li> </li> <li> <span> </span> </li> <li> </li> <li>[Strg+A Alles auswählen Hinweis: </li>Wenn Sie externe Js einführen müssen, müssen Sie eine Aktualisierung durchführen, um es auszuführen <li>]</li> Tipp: Sie können einen Teil des Codes zuerst ändern. Führen Sie </ul> erneut aus und probieren Sie es aus. Es ist leicht festzustellen, dass unsere Kinder einen Z-Index-Wert von 1000 haben und auf position:absolut; gesetzt sind . 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: 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 Kind über allen Inhalten schweben. Was aber, wenn tatsächlich span in allen LIs erforderlich ist und alle Eigenschaften 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. Lassen Sie uns den Positionierungseffekt dieser Mausreaktion erkennen:
Kopieren Sie den Code Der Code lautet wie folgt:

• Der erste Block li > ;Der dritte Block


• Vierter Block

Code kopieren

Der Code lautet wie folgt:*{margin:0; padding:0; list- style:none;} li {height:100px; float :left; width:100px;} li a {position:relative; z-index:1; display:block height:100px;} Hintergrund:#000000;} li span {display:none;}

li a:hover span {display:block;width:200px;position:absolute; ; left:100px; z-index:1000 }

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="zh-CN"> <title></title>Erstes Stück<style type="text/css"> /*<![CDATA[*/ *{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; } /*]]>*/ </style> <ul> <li> <a href="" title="">Zweites Stück<span></span></a> </li> <li> <a href="" title="">Dritter Block<span></span></a> </li> <li> <a href="" title="">Der vierte Block<span></span></a> </li> <li> <a href="" title="">Fünfter Block<span></span></a> </li> <li> <a href="" title=""> <span></span></a> </li> </ul>[Strg+A Alles auswählen Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie eine Aktualisierung durchführen, um es auszuführen ] Tipp: Sie können zuerst einen Teil des Codes ändern. Wenn wir
erneut ausführen, setzen wir a auf position:relative;, sodass seine untergeordneten Elemente basierend auf der oberen linken Ecke des übergeordneten Elements als Ursprung der Koordinaten positioniert werden. 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 das Nachdenken darüber im Grunde alle Probleme lösen: Kopieren Sie den Code

Der Code lautet wie folgt:

*{margin:0; padding:0; list-style:none;}
li {height:100px; float:left:100px;} >li a {display:block; width:100px;background:#000;}
li a:hover {position:relative; }
li span ;} 
li a:hover span {display:block; height:200px; top:0; z-index:1000;

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="zh-CN"> <title> </title> <style type="text/css"> /*<![CDATA[*/ *{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; } /*]]>*/ </style> <ul> <li>Erstes Stück<a href="" title=""><span></span> </a> </li> <li>Zweites Stück<a href="" title=""><span></span> </a> </li> <li>Dritter Block<a href="" title=""><span></span> </a> </li> <li>Der vierte Block<a href="" title=""><span></span> </a> </li> <li>Fünfter Block<a href="" title=""><span></span> </a> </li> </ul>
[Strg+A Alles auswählen Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie eine Aktualisierung durchführen, um es auszuführen ] Tipp: Sie können zuerst einen Teil des Codes ändern. Wenn wir erneut ausführen, müssen wir nur das Attribut von a:hover auf position:relative; setzen, sodass A nur dann ein relatives Positionierungsattribut zugewiesen wird, wenn die Maus ausgelöst wird. Damit ist das Problem der Blockierung durch andere übergeordnete Tags gelöst.

Natürlich, wenn Ihnen Browser wie IE6 oder IE5 nichts ausmachen 🎜> Der Code lautet wie folgt:

Der erste BlockZweites Stück
Drittes Stück
>
 
Der fünfte Block
  ul>  CSS kann wie folgt geändert werden:


Code kopieren


Der Code lautet wie folgt:


* {margin:0; padding:0; list-style:none;}
li {height:100px; float:left:100px; Hintergrund:#000;}
li :hover {position:relative; z-index:1;}
li span {display:none;}
li:hover span {display:block; width:200px ; Höhe:200px; Hintergrund:absolut;oben:1000;

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="zh-CN"> <title></title> <style type="text/CSS"> *{margin:0; padding:0; list-style:none;} li {width:100px; height:100px; margin:0 5px 0 0; background:#000; float:left;} 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; } </style> <ul> <li><span>Erstes Stück</span></li> <li><span>Zweiter Block</span></li> <li><span>Dritter Block</span></li> <li><span>Der vierte Block</span></li> <li><span>Der fünfte Block</span></li> </ul>
[Strg+A Alles auswählen Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie eine Aktualisierung durchführen, um es auszuführen ]
Tipp: Sie können zunächst einen Teil des Codes ändern. Führen Sie ihn erneut aus
Originallesung:
http://andymao.com/andy/post/67.html