Position CSS
En CSS, l'attribut Position est souvent utilisé, principalement le positionnement absolu et le positionnement relatif. Il n'y a aucun problème en utilisation simple, surtout lorsqu'il est imbriqué, ce sera un peu déroutant.
Attribut Position : Spécifie le type de positionnement de l'élément. Autrement dit, les éléments sont séparés de la mise en page du flux de documents et affichés n'importe où sur la page.
valeur de l'attribut position :
absolu : Génère des éléments positionnés de manière absolue, par rapport au premier élément autre que le positionnement statique élément parent pour le positionnement. La position de l'élément est spécifiée via les attributs "left", "top", "right" et "bottom".
relatif : Génère un élément relativement positionné, positionné par rapport à sa position normale. Par conséquent, "left:20" ajoute 20 pixels à la position GAUCHE de l'élément.
fixe : Génère des éléments positionnés de manière absolue, positionnés par rapport à la fenêtre du navigateur.
statique : Valeur par défaut. Sans positionnement, l'élément apparaît dans un flux normal (en ignorant les déclarations haut, bas, gauche, droite ou z-index). La position de l'élément est spécifiée via les attributs "left", "top", "right" et "bottom".
inherit : Spécifie que la valeur de l'attribut position doit être héritée de l'élément parent.
Les deux méthodes les plus couramment utilisées sont absolue et relative.
attribut auxiliaire de position :
①left : Indique combien de pixels à insérer dans le à gauche de l'élément, de combien de pixels déplacer l'élément vers la droite.
②right : Indique combien de pixels insérer à droite de l'élément et combien de pixels déplacer l'élément vers la gauche.
③top : Indique combien de pixels insérer au-dessus de l'élément et combien de pixels déplacer l'élément vers le bas.
④bottom : Indique combien de pixels insérer sous l'élément et combien de pixels déplacer l'élément vers le haut.
La valeur des attributs ci-dessus peut être négative, unité : px.
Positionnement absolu
Positionnement absolu ; La mise en page s'éloigne du flux documentaire et l'espace restant est rempli par les éléments suivants. La position de départ du positionnement est l'élément parent le plus proche (la position n'est pas statique), sinon c'est le document Corps lui-même.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
html body
{
margin: 0px;
padding: 0px;
}
#parent
{
width: 200px;
height: 200px;
border: solid 5px black;
padding: 0px;
position: relative;
background-color: green;
top: 15px;
left: 15px;
}
#sub1
{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 15px;
left: 15px;
}
#sub2
{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="parent">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>
</body>
</html>Remarque : Nous avons constaté que parce que nous avons positionné Sub1 de manière absolue, la position de Sub1 était décalée, tandis que le frère Div Sub2, occupait la position de Sub1, et Sub1 bloque Sub2.
Positionnement relatif relatif
le positionnement relatif ne se détache pas de la mise en page du flux de documents, seulement ; change sa propre position, laissant un espace vide dans la position d'origine du flux de documents. La position de départ du positionnement est la position originale de cet élément dans le flux documentaire.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
html body
{
margin: 0px;
padding: 0px;
}
#parent
{
width: 200px;
height: 200px;
border: solid 5px black;
padding: 0px;
position: relative;
background-color: green;
top: 15px;
left: 15px;
}
#sub1
{
width: 100px;
height: 100px;
background-color: blue;
position: relative;
top: 15px;
left: 15px;
}
#sub2
{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="parent">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>
</body>
</html>Remarque : Nous constaterons que Sub1 est décalé, ce qui n'affecte pas la position de Sub2, et couvre en même temps Sub2. N'oubliez pas que le décalage n'est pas relatif au Div. Parent, mais par rapport à la position d'origine de Sub1.
Positionnement fixe
Positionnement fixe ; similaire à l'absolu, mais ne change pas de position lorsque la barre de défilement se déplace.
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
html body
{
margin: 0px;
padding: 0px;
}
#parent
{
width: 200px;
height: 200px;
border: solid 5px black;
padding: 0px;
position: relative;
background-color: green;
top: 15px;
left: 15px;
}
#sub1
{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 15px;
left: 15px;
}
#sub2
{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
top: 5px;
left: 5px;
}
</style>
</head>
<body>
<div id="parent">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>
</body>
</html>Remarque : vous constaterez que Sub2 est toujours positionné avec le corps.
