Comment superposer une div sur une autre div avec CSS

juillet 10, 2019février 10, 2020 Amine KOUIS 2 Commentaires

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

QCMs qui pourraient vous intéresser :

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

mecstone
juin 8, 2021 à 5:45 pm
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
- ">lol
  septembre 6, 2021 à 5:25 pm
  Permalien
  
  test
  Répondre

Code HTML:

Code CSS:

Vous pourrez aussi aimer

Comment changer la couleur de la balise HR avec CSS

Comment créer un curseur personnalisé avec CSS

Personnaliser la balise select avec CSS

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

Laisser un commentaire Annuler la réponse