Instruction
position est polyvalente et puissante. Elle permet de définir ou de modifier la position d’un élément. Elle a 4 valeurs possibles :
static(Valeur par défaut)relativeabsolutefixed
On lui adjoint volontiers et très régulièrement les propriétés des 4 coordonnées :
leftrighttopbottom
static
C’est la valeur de position par défaut : les éléments statiques suivent simplement le flux naturel. Ils ne sont pas affectés par les valeurs left, right, top ou bottom.
relative
Lorsque position est définie sur relative, un élément peut se déplacer en fonction de sa position actuelle.
<p> Eh bien, Ja devrait connaître ses propres affaires, pensai-je. Je saisis donc la lance et remontai aussi vite que possible vers l'homme rouge - étant si éloigné de mes ancêtres simiens que je le suis </ p> < p> J'imagine que le sithique lent d'esprit, comme l'a appelé Ja, l'a soudainement compris nos intentions et qu'il risquait fort de perdre tout son repas au lieu de le faire doubler comme il l'avait espéré </ p> <p> quand il m'a vu grimpant sur cette lance, il laissa échapper un sifflement qui fit trembler le sol et vint me charger à un rythme effréné </ p>p { border: 1px solid blue;}Déplaçons le second paragraphe:
<p> Eh bien, Ja devrait connaître ses propres affaires, pensai-je. Je saisis donc la lance et remontai aussi vite que possible vers l'homme rouge - étant si éloigné de mes ancêtres simiens que je le suis </ p> < p class = "second"> J'imagine que le sithique à l'esprit lent, comme l'appelait Ja, a soudainement compris nos intentions et qu'il risquait fort de perdre tout son repas au lieu de le faire doubler comme il l'avait espéré </ p> <p > Quand il m'a vu grimper sur cette lance, il a laissé un sifflement qui a secoué le sol, et est venu me chercher à un rythme effréné </ p>.second { position:relative;border-color: red; left: 20px; top: 10px;}Le paragraphe rouge s’est déplacé de 20 px à partir de la gauche et de 10 px du haut par rapport à sa position naturelle, où il est supposé se trouver.
Notez que les paragraphes bleus n’ont pas bougé du tout. En utilisant le positionnement relatif, le paragraphe rouge peut se déplacer librement sans perturber la mise en page. La seule chose qui ne soit pas à sa place est elle-même. Tous les autres éléments ne savent pas que cet élément a été déplacé.
absolute
Lorsque position est définie sur absolute, un élément peut se déplacer en fonction du premier ancêtre positionné.
“Positionné ?? Qu’est-ce qu’un élément positionné?
Un élément positionné est un élément dont la valeur de position est relative, absolute ou fixed. Ainsi, à moins que la position ne soit définie ou statique, un élément est positionné.
La caractéristique d’un élément positionné est qu’il peut servir de point de référence pour ses éléments enfants.
Imaginons une hiérarchie simple :
<section>
Je suis en position relative.
<p>
Je suis en position absolue!
</p>
</section>section { background: gold; height: 200px; padding: 10px; position: relative; /* <section> devient le point de référence du <p> */}
p {
background: limegreen; color: white; padding: 10px; position: absolute; /* Cela rend le <p> librement déplaçable */
bottom: 10px; /* 10px depuis le bas */
left: 20px; /* 20px depuis la gauche */
}La section jaune a une hauteur de 200px et sa position est définie sur relative, ce qui en fait un point de référence pour tous ses éléments enfants.
La position du paragraphe vert étant définie sur absolute, elle peut se déplacer librement en fonction de la section jaune. En définissant les valeurs bottom et left, il se déplacera du coin inférieur gauche.
Que se passe-t-il si nous mettons les deux à gauche ET à droite?
Si la largeur n’est pas définie, l’application de left: 0 et right: 0 étendra l’élément sur toute la largeur. C’est l’équivalent du réglage left: 0 et de width: 100%.
Si la largeur est définie, la valeur correcte est ignorée.
fixed
Lorsque position est définie sur fixed, cela agit comme absolute : vous pouvez définir les coordonnées gauche / droite et haut / bas.
La seule différence est que le point de référence est la fenêtre d’affichage. Cela signifie qu’un élément fixe ne défilera pas avec la page; il est fixé à l’écran.