Il existe trois formes de base de mécanismes de mise en page en CSS: le flux ordinaire, le positionnement flottant et le positionnement absolu. Utilisez le positionnement pour définir avec précision la position d'un élément ou la position d'un élément par rapport à son élément parent, à un autre élément ou à la fenêtre du navigateur.
1. Positionnement de la position:
Cinq valeurs:- statique
- relatif
- fixé
- absolu
- gluant
1. statique ：
La valeur par défaut de l'élément HTML, c'est-à-dire aucun positionnement, suit l'objet de flot de documents normal. Les éléments positionnés statiquement ne seront pas affectés par le haut, le bas, la gauche et la droite.Code HTML:
<div class="box1">
</div>
Code CSS, avant d'ajouter la gauche et le haut:
.box1{
width: 300px;
height: 50px;
position:static;
background-color: paleturquoise;
margin:20px auto;
}
Après avoir ajouté:
.box1{
width: 300px;
height: 50px;
position:static;
background-color: paleturquoise;
margin:20px auto;
top:200px;
left:200px;
}
Remarque: l'emplacement n'a pas changé
2. relatif:
Le positionnement relatif est relatif à son emplacement d'origine, et l'espace qu'il occupait à l'origine demeure.<div class="box1">
</div>
Avant d'ajouter le haut et la gauche:
.box1{
width: 300px;
height: 50px;
position:relative;
background-color: paleturquoise;
margin:20px auto;
}
Après avoir ajouté:
3. absolu:
Positionner le positionnement absolu des éléments par rapport à l'élément parent positionné le plus proche, si l'élément n'est pas déjà l'élément parent positionné , alors sa position par rapport à la balise html , le positionnement absolu de la position du flux d'éléments de document n'a rien à voir , donc ne pas reprendre space, absolu L'élément positionné chevauche d'autres éléments. HTML:<div class="box1">
</div>
<div class="box2">
</div>
CSS:
.box1{
width: 300px;
height: 50px;
background-color: paleturquoise;
margin:20px;
position: absolute;
}
.box2{
width: 300px;
height: 50px;
background-color: #437aee;
}
4. fixe
La position de l'élément par rapport à la fenêtre du navigateur est une position fixe , même si la fenêtre roule elle ne bouge pas.
5. collant
Position basée sur la position de défilement de l'utilisateur.
-
Les éléments de positionnement collants dépendent du défilement de l'utilisateur, basculant entre la position: relative et la position: positionnement fixe.
-
Il se comporte comme position: relative;
et lorsque la page défile au-delà de la zone cible, il se comporte comme position: fixed; et il sera fixé à la position cible.HTML:
<div class="sticky">我是粘性定位!</div>
<div style="padding-bottom:2000px;background-color: #b9d1ee">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>
css:
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #83dde8;
border: 2px solid #3da0af;
}
2. Contenant des blocs:
Bloc contenant: il s'agit d'un concept important du modèle de formatage visuel. Semblable au modèle de boîte, il peut également être compris comme un rectangle. La fonction est de fournir une référence pour les éléments qu'il contient. Le calcul de la taille et de la position de l'élément est souvent déterminé par le bloc contenant où se trouve l'élément.
1. Élément racine:
Le bloc contenant de l'élément racine est un rectangle de la taille de la fenêtre, qui est le document parent de HTML.
2. Éléments non racine:
Si la position est relative ou statique , le bloc conteneur est formé par la limite de contenu de l'élément le plus proche.
HTML ：
<div class="box1">
<div class="box2">
box2
</div>
</div>
CSS:
.box1{
background-color: paleturquoise;
margin:20px;
padding:20px;
height: 200px;
}
.box2{
width: 300px;
position: relative;
background-color: #b9d1ee;
padding:20px;
}
Si la valeur de position est absolue , le bloc conteneur est défini sur l'élément ancêtre le plus proche dont la valeur de position n'est pas statique.
- Si l'ancêtre est un élément de niveau bloc, le bloc conteneur est défini comme limite de contenu de l'élément.
HTML:
<div class="box1">
<div class="box2">
box2
</div>
</div>
css ：
.box1{
background-color: paleturquoise;
margin:20px;
padding:20px;
height: 200px;
}
.box2{
width: 300px;
position: absolute;
background-color: #b9d1ee;
padding:20px;
}
- S'il n'y a pas d'ancêtre, le bloc conteneur de l'élément est défini comme le bloc conteneur initial, qui est document