Comment superposer une div sur une autre div avec CSS
Vous pouvez utiliser la propriété CSS position en combinaison avec la propriété z-index pour superposer une div sur un autre élément div. La propriété z-index détermine l’ordre des éléments positionnés (c’est-à-dire des éléments dont la valeur de position est absolue, fixe ou relative).
Essayons l’exemple suivant pour voir comment cela fonctionne:
Code HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Superposer une div sur une autre div avec CSS</title>
<style>
/* Mettez le code CSS ici. */
</style>
</head>
<body>
<div class="parent">
<div class="child1"></div>
<div class="child1 child2"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Superposer une div sur une autre div avec CSS</title>
<style>
/* Mettez le code CSS ici. */
</style>
</head>
<body>
<div class="parent">
<div class="child1"></div>
<div class="child1 child2"></div>
</div>
</body>
</html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Superposer une div sur une autre div avec CSS</title> <style> /* Mettez le code CSS ici. */ </style> </head> <body> <div class="parent"> <div class="child1"></div> <div class="child1 child2"></div> </div> </body> </html>
Code CSS:
.parent {
position: relative;
width: 300px;
height: 300px;
margin: 10px;
}
.child1 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.7;
background: red;
}
.child2 {
z-index: 1;
margin: 30px;
background: green;
}
.parent {
position: relative;
width: 300px;
height: 300px;
margin: 10px;
}
.child1 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.7;
background: red;
}
.child2 {
z-index: 1;
margin: 30px;
background: green;
}
.parent {
position: relative;
width: 300px;
height: 300px;
margin: 10px;
}
.child1 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.7;
background: red;
}
.child2 {
z-index: 1;
margin: 30px;
background: green;
}
| Résultat |
|---|
|
|
- Comment remplacer le Checkbox par un icone fontawesome
- Comment empêcher le redimensionnement d’un textarea en CSS
- Comment créer deux div côte à côte de la même hauteur en CSS
- Comment supprimer l’espace entre les cellules d’une colonne d’un tableau en CSS
- Comment placer une bordure à l’intérieur d’un bloc div en CSS
- Comment changer une image au survol avec CSS
- Comment rendre une DIV modifiable en HTML
- Comment changer la couleur du texte au survol en CSS
- Comment ajouter l’ombre sur un texte en CSS
- Comment ajouter l’ombre aux éléments HTML en CSS
- Comment créer un curseur personnalisé avec CSS
- Comment afficher du texte sur une image avec HTML / CSS
- Comment créer un lien avec un bouton HTML
- Comment supprimer l’espace blanc sous une image avec CSS
- Comment changer la transparence du background sans affecter le texte
- Comment créer une ligne verticale en HTML
- Comment changer l’aspect du curseur en CSS
- Comment redimensionner automatiquement une image pour l’adapter à un bloc DIV avec CSS
- Comment changer la couleur de la balise HR avec CSS
- Comment aligner un bloc DIV horizontalement avec CSS
- Comment définir la hauteur d’une DIV à 100% avec CSS
- Comment aligner le texte verticalement au centre d’une DIV avec CSS
- Comment ajuster la taille d’une div à son contenu en CSS
- Comment créer une liste sans puces en HTML
- Comment superposer une div sur une autre div avec CSS
- Comment redimensionner une image en background avec CSS
- Comment désactiver un lien en utilisant uniquement CSS
- Comment aligner verticalement une image dans une DIV en CSS
- Comment écrire des commentaires en CSS
- Comment écrire des commentaires en HTML
- Changer le bouton parcourir d’un input de type file avec CSS
- Personnaliser la balise select avec CSS
- Personnaliser les boutons checkbox avec CSS
- Personnaliser les boutons radio avec CSS
QCMs qui pourraient vous intéresser :
- Questions techniques sur MYSQL
- QCM MySQL Corrigé – Optimisation de requêtes
- QCM Base de données avec correction
- QCM sur PHP
- QCM Symfony
- QCM AngularJS
- QCM React
- QCM HTML / CSS
- QCM Java – Programmation Orientée Objet
- QCM Python
- QCM Cloud Computing
- QCM Framework Spring
- QCM Javascript
- QCM jQuery
- QCM Oracle
- QCM sur GIT – Gestionnaire de version
- QCM Linux – Gestion de processus
- QCM Réseau
- QCM Architecture des ordinateurs
- QCM Securité informatique
- QCM En Informatique Générale
- QCM en C
- QCM en C#
- QCM sur l'algorithmique
- QCM Word
- QCM Excel
- QCM PowerPoint
- QCM Access
bien sur le code mais je panse qu’elle est pas adapter et aussi elle n’est pas vraiment styler sur le fait que elle repond partiellement au principe de superposition
test