Comment faire chevaucher deux divs avec CSS

Comment faire chevaucher deux divs en utilisant CSS : utilisez d'abord l'attribut [position:absolute] pour définir le positionnement absolu du div ; puis utilisez l'attribut z-index pour déterminer quel div se trouve sur la couche supérieure. L'attribut z-index est utilisé pour spécifier l'ordre d'empilement d'un élément.

L'environnement d'exploitation de ce tutoriel : Système Windows 10, version CSS2, cette méthode convient à toutes les marques d'ordinateurs.

Introduction aux attributs importants :

L'attribut position spécifie le type de positionnement de l'élément.

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)

Valeur d'attribut :

• absolue Générer des éléments positionnés de manière absolue, positionnés par rapport sur le premier élément parent autre que le positionnement statique. La position de l'élément est spécifiée via les attributs "left", "top", "right" et "bottom".

• relative Génère un élément relativement positionné, positionné par rapport à sa position normale. Par conséquent, "left:20" ajoute 20 pixels à la position GAUCHE de l'élément.

L'attribut z-index spécifie l'ordre d'empilement d'un élément. Les éléments avec un ordre d'empilement supérieur apparaîtront toujours devant les éléments avec un ordre d'empilement inférieur.

Valeur de l'attribut :

• auto par défaut. L'ordre d'empilement est égal à celui de l'élément parent.

• numéro Définit l'ordre d'empilement des éléments.

• inherit spécifie que la valeur de l'attribut z-index doit être héritée de l'élément parent.

Implémentation du code :

Code html :

<div id="img_head" >
<img src="img/首页logo.png" class="head">
</div>
<div id="img_head_back">
<img src="img/背景.png" class="back" >
</div>

Code css :

#img_head{
border: 1px solid #FF0000; 
position:absolute;
width:210px;
height: 210px;
z-index: 20;
left:600px;
top:170px;
text-align: center;
}
#img_head_back{
border: 0px solid #FF0000;
position:absolute;
width: 210px;
height: 210px;
left:600px;
top:170px;
z-index:10;
}

Recommandations associées : Tutoriel CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!