Le positionnement en CSS !

Des positions css3 sur un élément

Le positionnement des éléments sur un site web se fait grâce à la structure HTML par défaut. En fonction des éléments HTML et de la hiérarchie, ces éléments vont s’empiler les uns sur les autres.

Certains éléments se succèdent verticalement, ce sont les éléments de type inline, on retrouve le fameux div, mais aussi les balises h pour les titres et les balises p pour les paragraphes. Sans modification par le CSS, ces éléments prennent toute la largeur disponible. De plus, il y a un saut de ligne avant et après ce qui donne cet empilement vertical.

Nous avons aussi les éléments de type block, qui sont l’inverse des types inline, elles ne prennent pas de place et peuvent s’empiler horizontalement. Ces types de balises servent à encadrer ou à mettre en valeur du contenu.

Ce qui fait la puissance du CSS c’est qu’il nous la donne la possibilité de positionner nos éléments comme on veux et peu importe son type ou sa place dans le code HTML grâce à la propriété position, utilisée conjointement avec d’autres propriétés de position comme top, left, etc…

Nous allons voir les différentes valeurs que peut prendre la propriété position ! C’est parti !

La position statique

La position statique est la valeur par défaut quand on ne spécifie rien dans cette propriété. L’élément statique ne fait que suivre la structure HTML pour pouvoir se positionner par rapport aux autres éléments. Comme vu plus haut, cela dépend de son type et d’où il est placé dans le code HTML.


En ne se basant que sur cette valeur, la façon dont on positionne nos éléments est assez limitée et pas pratique du tout. On peut toujours jouer sur la propriété display qui permet de changer le type d’une balise ou sur la propriété float, mais cela est peu pratique.

De plus, la valeur statique ne permet pas l’utilisation des autres propriétés de position comme z-index, top, bottom, left et right ce qui limite d’autant plus les possibilités.

vous n’aurez normalement pas à spécifier cette valeur très souvent, mais voilà comment on fait :

position: static

Passons vite à plus intéressant qui est …

 

… la position relatif

L’élément relatif se comporte exactement comme la position statique, elle prend en compte le type de balise et la hiérarchie. Mais cette valeur rajoute la possibilité de déplacer un élément grâce aux quatre propriétés de position qui est top, left, right et bottom.

Comme son nom l’indique, la position d’un élément qui est relatif dépend de la position de son élément parent sur l’écran. Un décalage de 50px vers le haut correspondra toujours au même décalage par rapport à son parent. Mais si l’élément père se déplace de l’écran, alors l’élément relatif se déplacera lui aussi avec son père, tout en conservant son décalage de 50px avec lui !

Un autre concept à saisir pour comprendre les positions est le concept de référence. En utilisant les quatre propriétés de position, le décalage sur l’écran ne sera pas pareil en fonction de quel élément est la référence. Dans le cas d’un élément en position relative, c’est l’élément parent qui est la référence. Le décalage se fait donc en fonction de la position de la référence sur l’écran.

Un autre truc à comprendre c’est que si un élément en position relative est déplacé, cela ne perturbera pas la position des autres éléments de la page web.

Voilà comment on met un élément en position relatif :

position:relative

 

La position absolue

La position absolue se comporte exactement comme la position relative, mais a deux différences notables.

La 1ere est que comparée à la position relative, l’élément en absolu sort de la structure HTML au niveau du positionnement. C’est comme s’il n’existait plus pour les autres éléments qui viendront s’adapter en conséquence. Du coup, tous les éléments absolus se retrouveront dans le coin en haut à gauche de sa référence et s’empileront les uns sur les autres si aucune des quatre propriétés de positions n’est spécifiée.

La 2e c’est que sa référence sera toujours la balise body, sauf si son élément parent à une position autre que statique, dans ce cas alors, ça sera son élément parent la référence.

position: absolute

 

la position fixe

La position fixe partage les mêmes caractéristiques que la position absolue (encore !), mais avec une différence subtile. La référence n’est pas son élément père, ni la page web, mais la fenêtre de votre navigateur !

L’élément reste dans un endroit fixe de la page web et n’y bouge pas, même si vous défilez la page vers le haut ou le bas comparé aux autres positions.

position: fixed

la position héritée …

… qui ne sert pas à grand-chose en fait, elle permet d’hériter la position de son élément père, voilà !

position: inherit

Et voilà comment positionner ses éléments sur une page HTML, il est possible bien sûr de faire un mix de toutes ses valeurs pour obtenir des effets toujours plus puissants !

A++ 🙂

Partager l’article :
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.