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

 

2 réflexions sur “Comment superposer une div sur une autre div avec CSS

  • juin 8, 2021 à 5:45
    Permalien

    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

    Répondre

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.