Exécuter
❯
Exécuter le code
Ctrl+Alt+R
Enregistrer le code
Ctrl+Alt+A
Changer d'orientation
Ctrl+Alt+O
Changer de thème
Ctrl+Alt+D
<!DOCTYPE html> <html> <head> <style> .container { position: relative; } .black-box { position: relative; z-index: 1; bordure: 2px solide noir; hauteur: 100px; marge: 30px; } .gray-box { position: absolute; z-index: 3; /* la boîte grise sera au-dessus de la boîte verte et de la boîte noire */ arrière-plan: gris clair; hauteur: 60px; largeur: 70%; gauche: 50px; haut: 50px; } .green-box { position: absolute; z-index: 2; /* la boîte verte sera au-dessus de la boîte noire */ arrière-plan: vert clair; largeur: 35%; gauche: 270px; haut: -15px; hauteur: 100px; } </style> </head> <body> <h1>Exemple de Z-index</h1> <p>Un élément avec un ordre de pile supérieur est toujours au-dessus d'un élément avec un ordre de pile inférieur.</p> <div class="container"> <div class="black-box">Boîte noire (z-index: 1)</div> <div class="gray-box"><gray>Boîte grise (z-index : 3)</gray></div> <div class="green-box">Boîte verte (z-index : 2)</div> </div> </body> </html>