Notes d'entrée CSS 4 table des matières
- Div hiérarchique, position de positionnement CSS, contexte en cascade
Div hiérarchique, position de positionnement CSS, contexte en cascade
Préface
C'est le point de connaissance que j'ai résumé sur la manière d'apprendre. Le graphique du code source présente en détail div hiérarchique, position de positionnement CSS et contexte en cascade. J'espère que cela sera utile à tout le monde, et je continuerai à Gauguin, progressons ensemble dans la nouvelle année!
1. Superposition de div
L'étape suivante consiste à vérifier la position de chaque élément dans la couche div. L'idée principale est de chevaucher et de couvrir
1.1 D'où vient le fond? Où est la couleur de fond div
La plage d'arrière-plan est la zone délimitée par le bord extérieur de la bordure.
Idées
Comment le vérifier?
Il peut être vu en définissant la bordure semi-transparente
processus
code montrer comme ci-dessous
<head>
...
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.demo{
box-sizing: border-box;
margin: 12px;
border: 10px solid rgba(255,0,0,1);
padding: 22px;
width: 100px;
height: 100px;
background: blue;
color: white;
}
</style>
</head>
<body>
<div class="demo">
内容
</div>
</body>
Le code spécifique peut être consulté sur http://js.jirengu.com/vemax/1/edit?html, css, sortie
L'effet obtenu en ajustant la transparence de la bordure 1 à 0 via les outils de développement est le suivant
en conclusion
Le rouge devient transparent, le bleu apparaît- "On peut en conclure que la plage d'arrière-plan se situe à la fin de la zone délimitée par le bord extérieur de la bordure, ce qui prouve que la couleur d'arrière-plan est en dessous du corps de la bordure
1.2 Où est le contenu du texte?
Idées
On peut voir de face que le contenu couvre la couleur d'arrière-plan et que le contenu est au-dessus de l'arrière-plan. Le contenu est-il au-dessus de la bordure?
Il peut être vérifié par code.
processus
Sur la base du code ci-dessus, ajoutez un élément span ( <span class=text>内容</span>) au div, puis définissez le style pour augmenter la taille de la police ( .text{ font-size: 100px; color: green }).
Le code spécifique peut être consulté à http://js.jirengu.com/zifot/1/edit?html, css, sortie
On peut voir que l'effet est le suivant
en conclusion
On peut voir sur l'image que le contenu couvre la bordure - donc le contenu est au-dessus de la bordure
1.3 Où sont les sous-éléments de ce bloc?
Idées
En ajoutant des éléments enfants au niveau du bloc, il chevauche l'objet de comparaison
processus
Toujours passer la vérification du code
<head>
...
<style>
.demo{
background: rgb(120,184,211);
width: 200px;
height: 200px;
border: 15px solid rgba(255,0,0,1);
padding: 10px;
}
.childDiv{
background: white;
height: 50px;
margin-top: -10px;
}
</style>
</head>
<body>
<div class="demo">
我是文字内容
<div class="childDiv"></div>
</div>
</body>
Ajout d'un élément enfant de niveau bloc childDiv au div, définissez son style sur blanc et déplacez-le de -10px vers le haut
en conclusion
-
On peut voir que le div blanc de l' élément enfant au niveau du bloc est sur l'arrière-plan du div parent. "L' élément enfant au niveau du bloc est en arrière-plan.
-
On peut voir que le contenu textuel du div parent couvre le div blanc - "On peut conclure que le contenu textuel est l'élément enfant en ligne au-dessus de l'élément enfant au niveau du bloc
1.4 Où est l'élément flottant?
Idées
Ajoutez un div flottant vert à gauche dans le div parent et définissez la marge droite sur -20px pour chevaucher le texte.
processus
code montrer comme ci-dessous
<head>
...
<style>
.demo{
background: rgb(120,184,211);
width: 200px;
height: 200px;
border: 15px solid rgba(255,0,0,1);
padding: 10px;
}
.childDiv{
background: white;
height: 50px;
}
.float{
float: left;
background: green;
height: 50px;
width: 50px;
color: red;
margin-right: -20px;
}
</style>
</head>
<body>
<div class="demo">
我是文字内容
<div class="float"></div>
<div class="childDiv"></div>
</div>
</body>
Le code spécifique peut être consulté à http://js.jirengu.com/zaban/1/edit?html, css, sortie
Le diagramme des effets est le suivant
en conclusion
-
On peut voir que l'élément flottant vert recouvre l'élément blanc non flottant. "L' élément flottant est au-dessus de l'élément enfant de niveau bloc.
-
On peut voir que le texte recouvre l'élément flottant vert- "L' élément enfant en ligne est au-dessus de l'élément flottant
1.5 En résumé, ce chiffre peut être vérifié:
Peu importe que le texte se trouve sur la partie la plus externe ou à l'intérieur d'un certain élément div, il est traité de la même manière.
2. Position de positionnement CSS
Après avoir compris la couche div, comprenons la position de positionnement CSS.
Quelle est la différence entre la mise en page et le positionnement écrits en CSS Getting Started Note 3 ?
La disposition est le plan d' écran sur
Le positionnement est perpendiculaire à l'écran
Comprendre le positionnement CSS d'abord comprendre le flux de documents et le modèle de boîte
Le flux de documents et le modèle de boîte peuvent afficher les notes d'entrée CSS 2
Ou vérifiez le flux de documents standard (flux normal) MDN / modèle de boîte (modèle de boîte) MDN
Cinq valeurs de position
选择器{
...
position: 五个取值;
}
2.1 statique
static est la valeur par défaut, ce qui signifie que l'élément actuel est dans le flux de documents
选择器{
...
position: static;
}
2.2 Positionnement relatif relatif
Le positionnement relatif augmente, mais ne s'écarte pas du flux de documents
选择器{
...
position: relative;
}
scènes à utiliser:
- Pour le
code spécifique pour le déplacement (rarement utilisé) , veuillez consulter http://js.jirengu.com/newuc/1/edit?html, css, sortie
Du point de vue du div noir, votre div vert est toujours dans sa position d'origine et la position que vous occupez reste la même, mais l'emplacement affiché est un peu décalé.
-
Utilisé pour parent sbsolute
-
Avec z-index
z-index: auto; valeur par défaut, ne crée pas de nouveau contexte en cascade
indice z: 0/1/2;
indice z: -1 / -2
Le z-index par défaut est auto, la valeur calculée par auto est 0, mais 0 ne peut pas être écrit (0 peut créer un contexte en cascade),
2.3 Positionnement absolu absolu
Sera positionné par rapport au premier élément positionné de l'élément ancêtre (tant qu'il n'est pas statique) , principalement associé à un élément relatif
- scènes à utiliser
- Éloignez-vous de la position d'origine et créez un nouveau calque, tel que le bouton de fermeture d'une boîte de dialogue
Le code spécifique peut être consulté sur http://js.jirengu.com/zizaf/1/edit?html, css, sortie
- Fonction de contenu d'affichage du survol de la souris
<head>
...
<style>
.container{
border: 1px solid red;
height: 300px;
position: relative;
padding: 20px;
}
button{
position: relative;
}
button span{
position: absolute;
border: 1px solid red;
white-space: nowrap;
/*控制文字内容不准换行*/
bottom: calc(100% + 10px);
/*距离底部100%再加10px*/
left: 50%;
transform: translateX(-50%)
}
/*默认不浮现，悬浮着浮现*/
button span{
display: none;
}
button:hover span{
display: inline-block;
}
</style>
</head>
<body>
<div class="container clearfix">
<div style="height: 100px;"></div>
<button>点击
<span class=tips>提示内容</span>
</button>
</div>
</body>
Veuillez vérifier le code spécifique http://js.jirengu.com/zosof/1/edit?html,css,output
Des effets similaires sont les suivants
- Peut être utilisé avec z-index
Sur certains navigateurs, si vous n'écrivez pas en haut / à gauche, la position sera confuse
Faire bon usage de la gauche: 100%; utilisé pour trouver l'emplacement
Faire bon usage de gauche: 50%; ajouter une marge négative (ou transformer: translateX (50%); ...)
2.4 Positionnement relatif de la fenêtre fixe
La fenêtre (viewport) est la zone que cette page Web peut montrer à l'utilisateur
Ne mettez pas fixd dans un attribut de transformation, il ne sera pas orthogonal.
Essayez de ne pas utiliser cet attribut sur votre téléphone portable, il y aura de nombreux problèmes
- scènes à utiliser
- Annonces ennuyeuses
- Bouton retour en haut
Pour un code spécifique, veuillez consulter http://js.jirengu.com/sibulo/1/edit?html,css,output
- Avec z-index
2.5 positionnement collant collant
Peut être utilisé comme barre de navigation, mauvaise compatibilité (la compatibilité peut être trouvée en recherchant sticky sur caniuse.com )
Similaire à ce qui suit
Le code spécifique peut être consulté à http://js.jirengu.com/rajeg/1/edit?html, css, sortie
Contexte à trois cascades
Aussi appelé contexte d'empilement
3.1 Éléments de positionnement
L'élément de positionnement est en haut par défaut (z-index = 0/1/2 / ...), il sera basé sur ce calque et continuera à monter, le z-index de -1 sera sous l'arrière-plan et continuera vers le bas. L'index z ne peut pas dépasser le contexte en cascade lorsqu'il est négatif. Cela n'a pas de sens de courir derrière html.
<head>
...
<style>
*{
margin: 0;padding: 0;box-sizing: border-box;}
.container{
border: 1px solid black;
height: 200px;
background: rgba(52, 235, 232, .5);
/*设置半透明可以看到背景下的relativ2的黑色*/
}
.relative{
height: 50px;
background: red;
position: relative;
margin-top: -10px;
}
.relative2{
height: 50px;
background: black;
position: relative;
top: -20px;
z-index: -1;
}
</style>
</head>
<body>
<div class="container">
我是文字
<div class="relative"></div>
<div class="relative2"></div>
</div>
</body>
Le code spécifique peut être consulté à http://js.jirengu.com/wupop/2/edit?html, css, sortie
Le diagramme des effets est le suivant
en conclusion
On peut voir sur l'image que la boîte de positionnement relative rouge recouvre le texte - l'élément de positionnement est en haut
On peut voir sur la figure que le fond bleu translucide du conteneur recouvre le fond de la case 2 avec z-index: -1 ;. . . - "Au fond
Il y a une image dessinée par l'enseignant pour illustrer
3.2 Les éléments de positionnement peuvent-ils dépendre de la taille de l'indice z?
Non, cela dépend s'ils sont dans le même périmètre.
z-index: 9; est-il supérieur à z-index: 2 ;?
Utilisez le code pour vérifier
Le code spécifique peut être consulté sur http://js.jirengu.com/dayev/2/edit?html, css, sortie
en conclusion:
- Le bleu 2 recouvre le rouge 9 - " a et b2 sont dans le même petit monde (le contexte empilé apporté par le conteneur). L'index z dans ce petit monde n'a rien à voir avec le monde extérieur. Seuls les z-index dans le même petit monde peuvent être comparés
3.3 Quels attributs peuvent créer un contexte en cascade?
Le code ci-dessus est de créer un contexte d'empilement en positionnement relatif absolu où la valeur de z-index n'est pas auto. Le parent ci-dessus avec z-index parle également de z-index: auto; la valeur par défaut ne crée pas de nouveau contexte d'empilement
Il existe de nombreuses situations dans lesquelles vous pouvez créer un contexte en cascade, et certaines propriétés non orthogonales peuvent également être créées. Celles dont il faut se souvenir sont:
-
z-index (l'élément dont la valeur de position est absolue (positionnement absolu) ou relative (positionnement relatif) et la valeur z-index n'est pas auto)
-
flex (élément enfant du conteneur flex (flexbox), et la valeur z-index n'est pas auto;)
-
opacité (éléments avec une valeur d'attribut d'opacité inférieure à 1)
-
transform (la valeur d'attribut n'est pas aucune)
Vous pouvez rechercher «MDN de contexte en cascade» pour en savoir plus sur le contexte en cascade et comment le créer.
-continuer
Je suis en route pour apprendre le front-end de l'entrée au sol. Chaque fois que vous regardez, c'est votre plus grand encouragement pour mon parcours d'apprentissage, travaillons dur ensemble!
Bienvenue à laisser vos précieux commentaires.
