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>

 
 

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;
}
Résultat

 

Partagez cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *