Plusieurs méthodes de positionnement couramment utilisées en CSS, directement sur les produits secs !
Qu'est-ce que le positionnement ?
Les éléments peuvent être positionnés à l'aide des propriétés top, bottom, left et right. Cependant, ces propriétés ne fonctionneront que si vous définissez d'abord
propriété de poste. Ils fonctionnent également différemment, selon la méthode de ciblage.
L'attribut position spécifie le type de positionnement de l'élément, qui est utilisé pour spécifier comment un élément est positionné dans le document.
Les attributs:
- positionnement relatif relatif
- positionnement absolu absolu
- positionnement fixe fixe
- positionnement collant collant
- Les éléments dont les valeurs d'attribut sont les quatre ci-dessus sont appelés éléments de positionnement
- statique La valeur d'attribut par défaut n'est pas un élément de positionnement lorsque la valeur d'attribut est statique
En positionnement, nous déterminons la position de l'élément de positionnement à travers les quatre attributs de haut à droite en bas à gauche.
Positionnement relatif : position : relative
Dans le positionnement relatif, l'élément de positionnement est positionné en fonction de sa position d'origine. Le positionnement relatif ne se détachera pas du flux de documents et n'affectera pas les autres éléments du flux de documents. Le décalage est basé sur la valeur donnée et la valeur peut être négatif ;
- haut Plus la valeur est grande, plus le haut est bas La différence entre le haut et la position d'origine
- Plus la valeur du bas est grande, plus la différence entre le bas et la position d'origine est élevée
- Plus la valeur de gauche est grande, plus la différence entre la gauche et la position d'origine est à droite
- Plus la valeur de ight est grande, plus la différence de position gauche, droite et originale est importante
Fonctionnalités Occupez la position d'origine, occupez la position dans le flux de documents.
Positionnement absolu : position : absolu
Dans le positionnement absolu, la base de positionnement est le parent de l'élément de positionnement, jusqu'à ce que l'élément de corps soit trouvé, l'élément positionné de manière absolue se détachera du flux de documents, et la largeur et la hauteur peuvent être définies dans la ligne, et l'élément de bloc n'occupe pas une seule ligne, et la largeur et la hauteur sont étendues par le contenu ;
- top Plus la valeur est grande, plus la différence entre le haut et le haut du parent de positionnement est faible
- bottom Plus la valeur est grande, plus la différence entre le bas et le bas du parent de positionnement est élevée
- Plus la valeur de gauche est grande, plus elle est à droite. La différence entre la gauche et la gauche du parent de positionnement
- right Plus la valeur est grande, plus left est la différence entre la droite et la droite du parent de positionnement
Hors flux de documents
Positionnement fixe : position : fixe
Positionnement en fonction de la position et de la taille de la fenêtre du navigateur, la position de l'élément ne changera pas lorsque le contenu de l'écran défile et l'élément positionné de manière fixe sortira du flux de documents ;
- top Position selon le bord supérieur de la fenêtre
- bas Position selon le bas de la fenêtre
- position gauche selon le côté gauche de la fenêtre
- right Position selon le côté droit de la fenêtre
Positionnement collant : position : collant
Le positionnement collant peut être vu comme un mélange de positionnement relatif et de positionnement fixe : l'élément est positionné relativement avant de franchir le seuil, et fixe ensuite ;
.stickyElement{
largeur : 100 % ;
hauteur : 30px ;
couleur de fond : #FFFFAA ;
position : collante ;
haut : 10px ;
}
fonctionnalité:
Avant que l'élément ne défile à moins de 10 pixels du haut de la fenêtre, l'élément est positionné de manière relative, puis l'élément sera fixé à la position où le haut est à 10 pixels jusqu'à ce que la fenêtre soit restaurée.
Le positionnement collant est un contenu CSS3 nouvellement ajouté, qui peut ne pas être pris en charge par les anciens navigateurs.
extension:
axe z index z
L'ordre dans lequel les éléments sont affichés
La valeur est un entier positif
cas:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位</title>
<style>
body{
margin: 0;
}
.relativeElement{
position:relative;
width: 300px;
height: 300px;
background-color: #FFAAAA;
z-index: 2;
}
.normalElement{
width: 300px;
height: 900px;
background-color: #AAFFAA;
}
.absoluteElement{
width: 100px;
height: 100px;
background-color: #AAAAFF;
position: absolute;
top: 20px;
left: 20px;
z-index: 10;
}
.fixedElement{
width: 100%;
height: 30px;
background-color: #FFFFAA;
position: fixed;
left: 0;
top: 0;
z-index: 99;
}
.stickyElement{
width: 100%;
height: 30px;
background-color: #FFFFAA;
position: sticky;
top: 10px;
}
</style>
</head>
<body>
<div class="relativeElement">
<span class="absoluteElement"></span>
<div style="width:100px;height:100px;background-color:#AAFFAA;z-index: 9;position: absolute;"></div>
</div>
<div class="stickyElement">粘性导航条</div>
<div class="normalElement">
<!-- <div class="absoluteElement"></div> -->
</div>
<div class="normalElement" style="background-color: #AAFFFF"></div>
<!-- <div class="fixedElement">导航条——吸顶导航</div> -->
</body>
</html>Dépêchez-vous, aimez, récupérez et exécutez-le!