Solution au problème de niveau que l'absolu relatif ne peut pas percer_Échange d'expérience

Si nous définissons LI sur position:relative; set span sur position:absolute; alors nous constaterons que quelle que soit la valeur de l'index z de SPAN, elle sera toujours inférieure au parent derrière.

Il y a quelque temps, je me souviens que quelqu'un a posé une question dans le groupe qui a vraiment rendu tout le monde confus :

<ul>   
<li>第一块</li>   
<li><span>第二块</span></li>   
<li>第三块</li>   
<li>第四块</li>   
<li>第五块</li>   
</ul>

Si nous définissons LI sur position:relative ;Set span sur position:absolute; Ensuite, nous constaterons que quelle que soit la valeur de l'index z de SPAN, elle sera toujours inférieure au parent derrière.

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

Il est facile de trouver nos enfants en l'essayant. La valeur du z-index atteint 1000 et est définie sur position:absolut; J'y ai réfléchi longtemps, et je pense que le problème fondamental est : définir la même position : relatif/absolu ; le niveau entre les étiquettes du même niveau ne peut pas être dépassé par le z-index. Dans notre exemple ci-dessus, le niveau du premier LI sera toujours inférieur au niveau du prochain LI, nous définissons donc position:absolute; sur les enfants de LI, ce qui donne une valeur d'indice z très élevée.

Peut-être penseriez-vous comme ceci : ne serait-il pas agréable de simplement définir position:relative pour le LI avec span ? Très vrai. Lorsqu'aucun autre LI ne définit position:relative; alors l'enfant dont nous avons besoin peut flotter au-dessus de tout le contenu. Mais que se passerait-il si, en fait, l'étendue était requise dans tous les LI et que toutes les propriétés devaient être les mêmes ? Bien sûr, nous n’avons pas nécessairement besoin de cet effet. Mais nous avons besoin d'un tel effet : tous les enfants sont cachés, apparaissent lorsqu'il y a une réaction de la souris et flottent au-dessus de tout le contenu. Il faut savoir que c'est effectivement un casse-tête, car comme nous l'avons vu plus haut, les enfants sont pressés sous l'étiquette parent suivante lorsqu'ils sont affichés. Implémentons l'effet de positionnement de cette réponse de la souris :

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

Nous utilisons l'événement de souris lié pour compléter l'effet d'affichage et de masquage :

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

Nous définissons a as position :relative; De cette façon, ses enfants seront positionnés en fonction du coin supérieur gauche du parent comme origine des coordonnées. Ensuite, nous définissons la forme spécifique et les propriétés de positionnement de la travée, puis nous les masquons. Nous utilisons ensuite la pseudo-classe:hover de A pour activer le span. Si nous regardons les résultats, nous verrons que tout ce qui devrait être en haut se trouve désormais en bas. Alors comment résoudre ce problème ? En fait, il est impossible de forcer une percée avec CSS, alors réfléchissons-y, pouvons-nous faire en sorte que la balise parent qui n'a pas été déclenchée n'ait pas l'attribut position:relative, mais seulement quand ; c'est déclenché ? Attribuer une telle valeur à ce parent ? En fait, penser à cela peut fondamentalement résoudre tous les problèmes :

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

Il suffit de définir l'attribut de a:hover sur position:relative;, de sorte que ce n'est que lorsque la souris est déclenchée que A se voir attribuer un attribut relativement positionné. De cette façon, l'embarras d'être bloqué par d'autres balises parents peut être résolu.

Bien sûr, si les navigateurs comme IE5 ne vous dérangent pas, nous pouvons également simplifier le code :

<ul>   
<li><span>第一块</span></li>   
<li><span>第二块</span></li>   
<li><span>第三块</span></li>   
<li><span>第四块</span></li>   
<li><span>第五块</span></li>   
</ul>

Le CSS peut être modifié comme suit :

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

Supplémentaire :
L'article "Position : relatif/absolu ne peut pas franchir le niveau" publié il y a quelque temps parlait du niveau en positionnement Quand je l'ai relu ces derniers jours, j'ai trouvé que l'article n'était pas approfondi. et n'a pas souligné le point clé. C'est pourquoi je voudrais faire ici un supplément spécial dans l'espoir que les niveaux en vigueur pourront être expliqués plus clairement et plus clairement.

Nous savons tous que la position a quatre valeurs différentes, à savoir : statique absolue fixe | Ceci est expliqué dans le « Manuel chinois CSS2 » de Su Yu : statique : pas de positionnement spécial, l'objet suit les règles de positionnement HTML absolues : faites glisser l'objet hors du flux de documents, utilisez les attributs gauche, droite, haut, bas et autres pour le rendre absolu ; position. Et sa cascade est définie via l'attribut z-index. À l'heure actuelle, l'objet n'a pas de marges, mais il y a toujours un remplissage et des bordures ; relatives : l'objet ne peut pas être empilé, mais sera décalé dans le flux normal du document en fonction d'attributs tels que gauche, droite, haut, bas, etc. .; corrigé : IE5.5 et NS6 ne sont pas encore disponibles. Cette propriété n'est pas prise en charge.

Mais pour changer la position d'empilement d'un objet, vous avez besoin d'une autre propriété CSS : z-index. Mais ce z-index n'est pas omnipotent. Il est limité par le niveau du code HTML. Le Z-index ne peut refléter son effet que sur du HTML du même niveau. Ce qu'il faut préciser ici, c'est que le z-index ne peut être utilisé que lorsque la valeur de position de l'objet est relative/absolue. Ci-dessous nous donnerons quelques exemples pour expliquer les caractéristiques des niveaux :

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

Pour le code HTML ci-dessus, nous devons également écrire un CSS pour le définir :

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

C'est le plus courant Dans ce cas, le niveau d'empilement de #a et #b peut être défini via z-index. Ce n'est pas demandé, alors dans quelles circonstances des problèmes surviendront-ils ? Regardons un autre exemple :

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

Écrivez un autre CSS basé sur cette structure. Faites attention aux différences dans ce CSS :

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