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

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>

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;}

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>

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;}

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; }

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>

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; }

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>

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; }

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>

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;}

这时候我们看,不论#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;}