À la suite de la lecture de cet article, vous pourrez créer des divs qui se chevauchent avec CSS. A cet effet, dans un premier temps, nous allons nous renseigner sur le « position ' et ' indice z ' Propriétés.
Commençons!
Propriété CSS 'position'
En HTML, vous pouvez définir la position des éléments en utilisant le ' position ' propriété. La position finale d'un élément sur une page Web est déterminée par sa droite, sa gauche, son haut, son bas et en combinaison avec les propriétés z-index.
Syntaxe
La syntaxe de la propriété position est :
position : évaluer
À la place de ' évaluer ”, vous pouvez définir différentes positions d'éléments telles que absolue, relative, fixe et collante.
Propriété CSS 'z-index'
La ' indice z ” La propriété est utilisée pour définir l'ordre de pile des éléments. L'élément ayant la plus grande valeur de z-index est placé devant les autres.
Syntaxe
La syntaxe de la propriété z-index est la suivante :
indice z : auto |nombreDans la syntaxe ci-dessus, ' auto ' est utilisé pour définir l'ordre en fonction de l'élément parent, tandis que pour la séquence manuelle, le ' Numéro ” est défini comme la valeur de la propriété z-index.
Passons maintenant à l'exemple pratique de la création de divs qui se chevauchent avec CSS.
Exemple 1 : chevauchement de la deuxième division avec la première
Dans la section HTML, nous allons créer deux divs et attribuer différents noms de classe comme ' div1 ' et ' div2 ”.
HTML
< corps >< div classer = 'div1' >< / div >
< div classer = 'div2' >< / div >
< / corps >
Maintenant, passez au CSS et suivez les instructions données :
- Définissez la valeur de la propriété de position sur ' absolu ” pour place div1 exactement l'endroit où vous voulez.
- Ajustez la hauteur et la largeur de la div1 comme ' 250px ' et ' 300px ”.
- La valeur du z-index est définie comme ' 1 ”.
- Définissez la couleur d'arrière-plan du div1 sur ' RVB(4, 3, 75) ”.
CSS
.div1 {position : absolu ;
la taille : 250px ;
largeur : 300px ;
indice z : 1 ;
Contexte : RVB ( 4 , 3 , 75 ) ;
}
Production
La première div est placée avec succès. Maintenant, nous passons à la deuxième div.
Pour chevaucher la div2, suivez les instructions données :
- Définissez la valeur de la propriété de position, la largeur et la hauteur du div2 de la même manière que le ' div1 ”.
- Définissez la valeur de l'index z sur ' deux ” pour le placer devant la première div.
- Définissez une couleur d'arrière-plan différente pour le div2 comme ' RVB(0, 204, 255) ”.
- Définissez la marge de div2 sur ' 50px ” comme valeur margin-top et margin-left.
- Définissez l'opacité de div2 sur ' 0,7 ”.
CSS
.div2 {position : absolu ;
largeur : 300px ;
la taille : 250px ;
indice z : 3 ;
Contexte : RVB ( 0 , 204 , 255 ) ;
marge : 50px ;
opacité : 0,7 ;
}
Production
Div2 chevauche avec succès div1.
Si vous souhaitez définir div1 au-dessus de div deux, il vous suffit de modifier la valeur du z-index. Voyons un exemple de cela.
Exemple 2 : Chevauchement de la première division avec la seconde
Dans cet exemple, nous allons changer la valeur du z-index des deux divs. Dans le ' .div1 ' classe du fichier CSS, définissez la valeur de ' indice z « propriété en tant que » deux ” :
indice z : deux ;Après cela, dans le « .div2 ' classe, définissez la valeur de la ' indice z « propriété en tant que » 1 ” :
indice z : 1 ;En conséquence, la première div sera placée devant la deuxième div :
Nous avons compilé la méthode la plus simple pour créer deux divs qui se chevauchent avec CSS.
Conclusion
La ' position ' et ' indice z ” est utilisée pour créer des divs qui se chevauchent en CSS. Par défaut, la valeur du z-index est 1, ce qui indique que la div nouvellement créée sera placée devant la div existante. Cependant, vous pouvez spécifier n'importe quelle valeur en fonction de vos besoins pour ajuster la séquence de chevauchement. Dans cet article, nous avons proposé les méthodes pour créer des Divs qui se chevauchent avec CSS.