Comment résoudre le problème de l'ajustement invalide de l'attribut z-index de la couche div-tutoriel CSS-php.cn

Comment résoudre le problème de l'ajustement invalide de l'attribut z-index de la couche div

不言

Libérer： 2018-06-20 15:54:34

original

9022 Les gens l'ont consulté

Cet article présente principalement l'analyse et les solutions pour les raisons non valides d'ajustement de l'attribut z-index de la couche p. Les amis dans le besoin peuvent se référer au

z-index n'est pas valide

en le faisant. , j'ai découvert un problème très simple que beaucoup de gens devraient rencontrer. La définition de l'attribut Z-INDEX n'est pas valide. En CSS, le niveau ne peut être modifié que par le code. Cet attribut est z-index. Il y a une petite condition préalable pour que z-index fonctionne, c'est-à-dire que l'attribut position de l'élément doit être relatif, absolu ou fixe.

1. La première situation (le z-index ne fonctionne pas, quel que soit son niveau) :

Il y a trois conditions pour que cela se produise :

1. L'attribut position de la balise parent est relatif ;

2. La balise question n'a pas d'attribut position (sauf statique
3.

par exemple : le niveau z-index ne fonctionne pas. Le flottement invalidera le z-index :

<p style="POSITION: relative; Z-INDEX: 9999">  
<IMG style="FLOAT: left" src="/131101/1A5494I0-0.jpg">  
</p>

Copier après la connexion

Il existe trois solutions (n'importe laquelle fera l'affaire. ):

1. Changer position:relative en position:absolute;

2. Ajouter des attributs de position (tels que relatif, absolu, etc.) aux éléments flottants
3. flottant.

2. Le deuxième cas

Sous IE6, les performances de la hiérarchie ne dépendent parfois pas du z-index de la sous-balise, mais de l'ensemble Arbre DOM (le niveau de la balise parent du premier attribut relatif de l'arborescence des nœuds).

par exemple : IE7 et IE6 ont le même bug. La raison est très simple, bien que le niveau actuel du père du p où se trouve l'image soit très élevé (1000), car le père du père n'est pas utile, c'est pitoyable qu'il soit 9999. Les enfants forts n'ont pas d'avenir ! , le code est le suivant :

<p style="POSITION: relative">
<p style="POSITION: relative; Z-INDEX: 1000">
<p style="POSITION: absolute; Z-INDEX: 9999"> <IMG src="/131101/1A3194V7-1.jpg"> </p>
</p> 
</p>

Copier après la connexion

Solution : Ajouter un niveau supérieur (z-index : 1) au premier attribut relatif, le code est le suivant :

<p style="POSITION: relative; Z-INDEX: 1">  
<p style="POSITION: relative; Z-INDEX: 1000">  
<p style="POSITION: absolute; Z-INDEX: 9999"> <IMG src="/131101/1A3194V7-1.jpg"> </p>  
</p>  
</p>

Copier après la connexion

et ci-dessus C'est tout le contenu de cet article. J'espère qu'il sera utile à l'étude de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de CSS3 Analyse du rem (définir la taille de la police)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!