Maison > interface Web > tutoriel CSS > Comment résoudre le problème de l'ajustement invalide de l'attribut z-index de la couche div

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal