Comment utiliser CSS pour superposer deux DIV-tutoriel CSS-php.cn

Comment utiliser CSS pour superposer deux DIV

php中世界最好的语言

Libérer： 2017-11-28 11:52:09

original

4325 Les gens l'ont consulté

Si vous implémentez un chevauchement DIV et souhaitez qu'ils se chevauchent dans l'ordre souhaité, cela nécessite le positionnement absolu de CSS pour y parvenir. Aujourd'hui, je vais vous parler de la méthode d'implémentation CSS des styles superposés.

Le CSS de chevauchement des DIV permet aux DIV de se chevaucher et de se chevaucher. Le CSS permet à deux DIV ou à plusieurs DIV de se chevaucher et de se chevaucher dans l'ordre

Il nécessite du CSS pour permettre aux DIV de se chevaucher et de se chevaucher dans l'ordre souhaité. , c'est-à-dire que le positionnement absolu CSS est implémenté.

Les styles qui se chevauchent nécessitent une interprétation majeure du style CSS

1, z-indexAttribut d'ordre qui se chevauchent

2, position:relative et position:absolute définissent les attributs de l'objet pour qu'ils soient positionnables (superposables)

3. gauche droite en haut en basParamètre de position spécifique au positionnement absolu

Style correspondant

1. CSS width

2. CSS hauteur

3 arrière-plan Afin d'observer l'effet, nous définissons différentes couleurs d'arrière-plan pour différentes. DIVs. Différences

Ensuite, nous vous fournirons un exemple de disposition de DIVs qui se chevauchent et se superposent selon vos propres souhaits. Nous créons 4 nouvelles boîtes DIV, une grande boîte DIV, nommée CSS ".div-relative", trois petites boîtes DIV placées dans la première grande boîte d'objet DIV, nommée DIV ".div-a", ".div-b", ".div-c".

Exemples de DIV en cascade et superposés non triés et triés

Le code source HTML complet est le suivant :

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>div重叠 叠加实例 未排层叠顺序 www.divcss5.com</title> 
<style> 
.div-relative{position:relative; color:#000; border:1px solid #000; width:500px; height:400px} 
.div-a{ position:absolute; left:30px; top:30px; background:#F00; width:200px; height:100px} 
/* css注释说明： 背景为红色 */ 
.div-b{ position:absolute; left:50px; top:60px; background:#FF0; width:400px; height:200px} 
/* 背景为黄色 */ 
.div-c{ position:absolute; left:80px; top:80px; background:#00F; width:300px; height:300px} 
/* DIV背景颜色为蓝色 */ 
</style> 
</head> 
<body> 
<div class="div-relative"> 
<div class="div-a">我背景为红色</div> 
<div class="div-b">我背景为黄色</div> 
<div class="div-c">我背景为蓝色</div> 
</div> 
</body> 
</html>

Copier après la connexion

Exemple de description :

Nous utilisons position pour obtenir un positionnement absolu, définissons l'attribut position:relative sur le parent et définissons position:absolute sur l'enfant plus gauche ou droite et haut ou bas pour obtenir un positionnement arbitraire de l'enfant. au sein du parent. Dans le cas d'origine, le chevauchement est disposé dans l'ordre des codes DIV eux-mêmes. Plus la case DIV est saisie tardivement, plus elle est proche de l'avant (flottant vers le haut). En plus de modifier l'ordre HTML du code div dans le code source lui-même, nous pouvons également utiliser CSS z-index pour implémenter l'ordre des couches DIV.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

La nécessité d'initialiser CSS avant de démarrer un projet front-end

Les avantages et les inconvénients d'asyncio

Explication détaillée de la mise en page réactive frontale, des images réactives et du système de grille créé par vous-même

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!