position : relatif/absoluLe niveau qui ne peut pas être cassé_Échange d'expérience

Remarque : Les exemples de cet article peuvent ne pas être affichés sous IE5.x. Veuillez utiliser IE6, IE7, Firefox, Opera et d'autres navigateurs pour déboguer !
Il y a quelque temps, je me souviens que quelqu'un avait posé une question dans le groupe que tout le monde ne comprenait vraiment pas :

Copier le code Le code est le suivant :

• Le premier bloc
troisième bloc

• Le quatrième bloc
Quelle que soit sa hauteur, il sera toujours en dessous du parent derrière lui.




Copier le code

Le code est le suivant :

*{margin:0; ; list- style : aucun ;} li {width : 100px height : 100px ; margin : 0 5px 0 0 ; float : left ; >li span {largeur : 200 px ; hauteur : 200 px ; arrière-plan : #c00 ; position : absolu ; gauche : 100px ;}

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">Premier bloc<meta http-equiv="Content-Language" content="zh-CN"> <title></title>Deuxième bloc<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> Troisième bloc<ul> <li>Le quatrième bloc</li> <li>Cinquième bloc<span> </span> </li> <li> </li> <li> <li> </li>[Ctrl+A Tout sélectionner Remarque : </ul>Si vous devez introduire des J externes, vous devez actualiser pour l'exécuter ] Astuce : Vous pouvez d'abord modifier une partie du code. Exécutez à nouveau et essayez-le. Il est facile de constater que nos enfants ont une valeur d'index z de 1000 et sont définis 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 y pensez-vous de cette façon : ne serait-il pas bien 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. Réalisons l'effet de positionnement de cette réaction de souris : Copiez le code

Le code est le suivant :

• Le premier bloc li > ;Le troisième bloc


• Quatrième bloc

Copier le code

Le code est le suivant :*{margin:0; padding:0; list- style:none;} li {height:100px margin:0 5px 0 0; :left; width:100px;} li a {position:relative; z-index:1; display:block height:100px;background:#000;}

li a:hover { background:#000000;}

li span {display:none;}
li a:hover span {display: block background:#c00; width:200px;position:absolute; ; gauche : 100px ; indice z : 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 {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>Première pièce<ul> <li> <a href="" title=""><span></span>Deuxième pièce</a> </li> <li> <a href="" title=""><span></span>Troisième bloc</a> </li> <li> <a href="" title=""><span></span>Le quatrième bloc</a> </li> <li> <a href="" title=""><span></span>Cinquième bloc</a> </li> <li> <a href="" title=""> <span> </span> </a> </li> </ul> [Ctrl+A Tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez actualiser pour l'exécuter
] Astuce : Vous pouvez d'abord modifier une partie du code. Lorsque nous exécutons à nouveau , nous définissons a sur position:relative; afin que ses enfants soient 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 en gros résoudre tous les problèmes :

Copiez le code

Le code est le suivant :

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

<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>Première pièce<li><a href="" title=""><span> </span></a></li>Deuxième pièce<li><a href="" title=""><span> </span></a></li>Troisième bloc<li><a href="" title=""><span> </span></a></li>Le quatrième bloc<li><a href="" title=""><span> </span></a></li>Cinquième bloc<li> <a href="" title=""><span> </span> </a> </li> </ul>
[Ctrl+A Tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez actualiser pour l'exécuter ] Astuce : Vous pouvez d'abord modifier une partie du code. Lorsque nous exécutons à nouveau , il nous suffit de définir l'attribut de a:hover sur position:relative;, afin que A se voie attribuer un attribut de positionnement relatif uniquement lorsque la souris est déclenchée. Ceci complète le problème du blocage par d'autres balises parents. Bien sûr, si les navigateurs comme IE6 ou IE5 ne vous dérangent pas 🎜> Le code est le suivant :

Le premier bloc

;span>Deuxième pièce

>

 

Le cinquième bloc

ul>  Le CSS peut être modifié comme suit :

Copier le code


Le code est le suivant :


* {margin:0; padding:0; list-style:none;}
li {hauteur:100px; float:left:100px; background:#000;}

li :hover {position:relative; z-index:1;}
li span {display:none;}
li:hover span {display:block width:200px; ; hauteur : 200 px ; arrière-plan : #c00 ; position : absolu ; gauche : 100 px ;

<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>Première pièce</span></li> <li><span>Deuxième bloc</span></li> <li><span>Troisième bloc</span></li> <li><span>Le quatrième bloc</span></li> <li><span>Le cinquième bloc</span></li> </ul>
[Ctrl+A Tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez actualiser pour l'exécuter ]

Astuce : Vous pouvez d'abord modifier une partie du code. Exécutez à nouveau
Lecture originale :
http://andymao.com/andy/post/67.html