Comment créer des divs qui se chevauchent avec CSS

Dans CSS, vous pouvez créer des divs qui se chevauchent en utilisant le «position" et "index z" propriétés. La propriété de position CSS définit la position du div ou du conteneur, tandis que la propriété Z-Index peut être utilisée pour définir la séquence DIV. Dans un tel scénario, la div ayant la plus grande valeur de l'index z est placée devant la seconde.

À la suite de la lecture de cet article, vous pourrez créer des divs qui se chevauchent avec CSS. À cette fin, nous apprendrons d'abord sur le «position" et "index z" propriétés.

Commençons!

Propriété «position» CSS

Dans 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, à gauche, en haut, en bas et en combinaison avec les propriétés Z-Index.

Syntaxe

La syntaxe de la propriété de position est:

Position: valeur

À la place de "valeur», Vous pouvez définir différentes positions d'éléments tels que absolu, relatif, fixe et collant.

Propriété CSS «Z-Index»

Le "index z»La propriété est utilisée pour définir l'ordre des éléments de la pile. L'élément ayant la plus grande valeur de l'index z est placé devant les autres.

Syntaxe

La syntaxe de la propriété Z-Index est la suivante:

Z-Index: Auto | Numéro

Dans la syntaxe donnée 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"nombre”Est ​​défini comme la valeur de la propriété Z-Index.

Maintenant, passons à l'exemple pratique de la création de divs qui se chevauchent avec CSS.

Exemple 1: chevauchant la deuxième div avec le premier

Dans la section HTML, nous créerons deux div et attribuerons des noms de classe différents comme «div1" et "div2".

Html

Maintenant, passez au CSS et suivez les instructions données:

• Définissez la valeur de la propriété de position comme «absolu«Pour Place Div1 exactement l'endroit où vous voulez.
• Ajustez la hauteur et la largeur du div1 comme «250px" et "300px".
• La valeur de l'index z est définie comme «1".
• Réglez la couleur d'arrière-plan du div1 comme «RVB (4, 3, 75)".

CSS

.div1
Position: absolue;
hauteur: 250px;
Largeur: 300px;
Z-Index: 1;
Contexte: RVB (4, 3, 75);

Sortir

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, de la largeur et de la hauteur de la div2 comme le «div1".
• Définissez la valeur de l'index z comme «2”Pour le placer devant la première div.
• Définissez une couleur d'arrière-plan différente pour la div2 comme «RVB (0, 204, 255)".
• Réglez la marge de div2 comme «50px”Comme la valeur de marge et de marge à gauche.
• Définissez l'opacité de Div2 comme «0.7".

CSS

.div2
Position: absolue;
Largeur: 300px;
hauteur: 250px;
Z-Index: 3;
Contexte: RVB (0, 204, 255);
marge: 50px;
Opacité: 0.7;

Sortir

Div2 chevauche avec succès Div1.

Si vous souhaitez définir Div1 au-dessus de Div Two, il vous suffit de modifier la valeur de l'index z. Voyons un exemple de ceci.

Exemple 2: chevauchant la première div avec le second

Dans cet exemple, nous modifierons la valeur de l'index z des deux div. Dans le ".div1«Classe du fichier CSS, définissez la valeur de«index z«Propriété comme«2»:

Z-Index: 2;

Après cela, dans le «.div2«Classe, définissez la valeur du«index z«Propriété comme«1»:

Z-Index: 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

Le "position" et "index z«La propriété est utilisée pour créer des divs qui se chevauchent dans CSS. Par défaut, la valeur de l'index z 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 exigences pour ajuster la séquence qui se chevauche. Dans cet article, nous avons proposé les méthodes de création de divs qui se chevauchent avec CSS.