Introduction à la méthode CSS de chevauchement aléatoire de p-tutoriel CSS-php.cn

Introduction à la méthode CSS de chevauchement aléatoire de p

零下一度

Libérer： 2017-06-07 09:19:12

original

2239 Les gens l'ont consulté

Cet article vous présente principalement comment faire se chevaucher et se chevaucher dans l'ordre souhaité, ce qui nécessite du CSS, c'est-à-dire un positionnement absolu CSS. Les amis qui en ont besoin peuvent s'y référer. Laisser p se chevaucher et se chevaucher dans l'ordre souhaité nécessite du CSS, c'est-à-dire un positionnement absolu CSS.
Les styles qui se chevauchent nécessitent des explications majeures sur le style CSS

1. Attribut d'ordre de chevauchement de l'index z
2 position:relative et position:absolute pour que les attributs d'objet soient positionnables (chevauchement)
3 , gauche droite haut bas positionnement absolu réglage de position spécifique

style correspondant
1. largeur CSS
2 hauteur CSS
3. p Différencier par couleur

Ensuite, nous vous fournirons un exemple de disposition de superposition et de superposition selon vos propres souhaits. Nous créons quatre nouvelles p-box, une grande p-box, nommée CSS ".p-relative", trois petites p-box placées dans la première grande p-box d'objet, et les p-box sont nommées ".p-a", ".p-b", ".pc".

1. Exemples non triés, en cascade et qui se chevauchent dans l'ordre trié

1. Le code source HTML complet est le suivant :

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

Copier après la connexion

<. 🎜>

2. Exemple de capture d'écran d'ordre d'empilement p non arrangé p+css

Exemple de description :

Nous utilisons la position pour obtenir un positionnement absolu . Le parent définit l'attribut position:relative et son enfant définit position:absolute plus gauche ou droite et haut ou bas pour permettre à l'enfant d'être positionné arbitrairement au sein du parent. Dans le cas d'origine, le chevauchement est organisé dans l'ordre du code p lui-même. Plus la case p est saisie tardivement, plus elle est proche (flottant vers le haut). En plus de changer l'ordre du code p dans le code source lui-même en html, nous pouvons également utiliser css z-index pour implémenter l'ordre des couches p.

2. Contrôlez l'ordre de chevauchement via CSS

Nous utilisons l'exemple de code de positionnement absolu ci-dessus et n'avons besoin que de ".p-a", ".p-b", ". p-c" "Ajoutez respectivement des styles z-index pour obtenir n'importe quel ordre.
Connaissances étendues :

La valeur du z-index est une valeur entière positive. Plus le nombre est grand, plus la couche d'objet est élevée.

L'ordre par défaut du. Les exemples ci-dessus sont ".p-c" flottant sur la couche supérieure (couche de fond bleu), ".p-b" flotte sur la couche intermédiaire (couche de fond jaune) et ".p-a" flotte sur la couche inférieure (couche de fond rouge). utilisez ensuite le style z-index. L'ordre est inversé sans changer le code html. ".p-b" flotte dans la couche intermédiaire (couche de fond jaune) et l'ordre reste inchangé sur la couche supérieure (fond rouge). calque) et ".p-c" flotte sur le calque inférieur (calque d'arrière-plan bleu).

1. Complétez le code HTML pour organiser l'ordre de chevauchement en cascade comme vous le souhaitez :

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

Copier après la connexion

3. p chevauchement Résumé

Pour obtenir un chevauchement p et modifier l'ordre de chevauchement des p boîtes, nous utilisons position:relative pour. le parent et la position : absolu, z-index (ordre de chevauchement), gauche pour l'enfant, droite, haut, bas le positionnement absolu est équivalent à la position spécifique du parent

.

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!