Comment utiliser CSS pour manipuler le z-index d'un div

Habituellement, il est facile de se tromper lorsque nous devons utiliser l'attribut z-index, nous allons donc aujourd'hui vous donner un aperçu de z-index, des attributs de base à la définition de l'ordre d'empilement et de l'ordre de chevauchement. d'objets.

Syntaxe et structure du z-index

z-index et nombre spécifique

tel que : p{z-index:100}

Remarque : z - La valeur de l'indice ne suit pas l'unité.

Plus le nombre d'index z est élevé, plus il est élevé et la valeur doit être un nombre entier et un nombre positif (un nombre entier d'un nombre positif).

Z-index ne peut être utilisé qu'avec l'attribut positionnement absolu position:absolute. Habituellement, nous avons différentes boîtes d'objets qui se chevauchent et les organisons dans des ordres différents, nous avons donc besoin de l'attribut de style z-index.

Afin de faciliter l'observation des attributs de style z-index, nous avons configuré trois boîtes DIV, définissons différentes couleurs de arrière-plan CSS et définissons la même hauteur CSS et la même largeur CSS. Définissez la couleur d'arrière-plan sur noir, rouge et bleu respectivement. La largeur CSS est de 100 pixels, la hauteur CSS est de 50 pixels.

Description du cas :

/* www.pcs5.com z-index实例 */ 
.p {position:relative;} 
.p -1,.p -2,.p -3 
{width:100px;height:50px;position:absolute;} 
.p -1{z-index:10;background:#000;left:10px;top:10px} 
.p -2{z-index:20;background:#F00;left:20px;top:20px} 
.p -3{z-index:15;background:#00F;left:30px;top:30px}

Les trois cases utilisent l'attribut de positionnement absolu position:absolute style et définissent les mêmes styles de hauteur et de largeur. Afin de faciliter l'observation, nous utilisons les attributs gauche et droit et attribuons différentes valeurs pour les rendre ordonnés.

Le fond de la boîte Div -1 est noir, z-index:10

<p class="p -1"></p> 
<p class="p -2"></p> 
<p class="p -3"></p>

Le fond de la boîte Div -2 est rouge, z-index:20

Le fond de la boîte Div -3 est Bleu, z-index:15

signifie que vous pouvez voir que la première case z-index:10, donc elle se chevauche en bas, tandis que la deuxième case, z-index:20, a la plus grande valeur, donc la couche supérieure se chevauche, la troisième case définit z-index:15, centrée.

4. Résumé de z-index - TOP

Nous utilisons le style de séquence superposée z-index Dans la mise en page DIV+CSS actuelle, nous avons besoin d'un style de positionnement absolu et pouvons utiliser gauche et droite. pour le positionnement, la séquence de chevauchement des couches est organisée selon différentes valeurs d'indice z.

.p _right{ float

:right

;width:150px;border:1px solid #00F;height:50px}

.clear{ clear:both }

Il existe de nombreuses façons d'utiliser z-index avec CSS. Les amis qui en ont besoin peuvent le sauvegarder. Veuillez également continuer à prêter attention aux autres mises à jour sur ce site.

Lecture connexe :

Comment définir l'attribut margin de CSS

Quelles sont les méthodes pour définir la couleur d'arrière-plan de DIV

Comment utiliser DIV+CSS

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!