Social

Position relative et absolute : explication

Posté le 07 septembre 2011

Type de tutoriels :

Comment gérer la position relative et absolue en CSS

Salut, à tous et bienvenue dans ce nouveau tutoriel concernant cette fois-ci le CSS.

 

Nous allons parler du positionnement, et plus précisément du position relative et absolute.

 

Alors pourquoi faire un tutoriel sur cela ? Simplement que je me suis rendu compte qu’il y a pas mal de personne qui n’arrive pas forcement à comprendre le principe.

 

 

Attention je ne prétend pas faire un tutoriel de la mort et beaucoup plus clair que les autres, mais je tenterais avec mes mots d’expliquer le principe assez clairement :)

 

Alors principalement, nous avons 2 types d’utilisations du positionnement utilisé le plus souvent :

 

– position : relative – position : absolute

 

Commençons par le premier.

 

 

 

1 – Position : relative

 

La position relative est un peu particulier et, pour ma part, je l’utilise que de 2 manières : permettre le positionnement enfant et pouvoir positionner l’élément dans le flux. Pour la première utilisation, je reviendrais dessus plus tard. Pour la seconde, la position relative en CSS positionne votre élément dans le flux, et ainsi vous pouvez le positionner via les propriétés top, right, bottom et left.

 

Petit rappel : Qu’est-ce que le flux ? Le flux, c’est tout simple la façon donc va s’afficher les éléments et comment ils seront disposés. En gros, si vous avez 2 éléments de type bloc (comme le div) ils se positionneront les uns en dessous des autres dans le flux. Mais si vous utilisez 2 éléments en ligne comme les span, ils s’afficheront les uns à côtés des autres dans le flux. Cette notion de flux est très importante car cela permet de bien comprendre le positionnement(et de ne pas galérer des heures sur des problèmes d’affichages :P )

 

 

 

2 – Position : absolute

 

La position absolute est plus compliqué à comprendre par pas mal de personne et je vous l’accorde, j’ai mis moi-même un petit moment à comprendre la subtilité. En gros, la définition de cette position est la suivante : « Un élément en position absolute est positionné par rapport au dernier élément positionné »… Vous voulez un doliprane ou un cachet aspirine ? :) Parlons plus simplement et avec schémas à l’appui ! Admettons que nous avons dans une page html, 2 éléments de type bloc.

 

Le code html serait le suivant :

 


Position relative et absolute


 

 

Je ne vais pas faire tout un CSS complet mais seulement 1 ou 2 lignes : Dans notre CSS, si on place ceci :

 

#bloc2 { position : absolute ; }

 

Qu’est-ce qu’il va se passer ? Et ben ceci :

 

 

Expliquons :

 

Notre élément bloc2 va chercher à se positionner. Rappelez-vous plus haut « Un élément en position absolute est positionné par rapport au dernier élément positionné ».

 

Donc notre bloc2 va faire quoi ? Il va cherche un élément supérieur positionné . Dans notre cas, bloc1 ne l’ai pas car on a rien mis. Donc, il ne va pas trouver et va donc remonter d’un cran. Par défaut, un élément bodyest positionné par défaut. Du coup, il va se positionner sur le body.

 

Maintenant, dans notre CSS, ajoutons ceci :

 

#bloc1 { position: relative; }

 

Revenons sur notre bloc1. Il veut chercher à se positionner. Il va donc regarder son élément parent (bloc1) et là, il voit qu’il est positionné (position relative). Oui vous l’aurez devinez, la position sera la suivante :

 

 

Vous voyez, ce n’est pas très compliqué, le tout est que ce soit expliqué ;)

 

Je pense qu’il y a probablement d’autre chose à apprendre sur les positions mais je n’ai pas cherché à vous faire un cours sur le positionnement, mais peut-être que je le ferais plus tard qui sait :)

 

Comme d’habitude, n’hésitez pas à intervenir via les commentaires si vous avez une question ou une remarque ! Vous êtes les bienvenues:)

 

A bientôt sur TefDesign.fr

 

Tef

2

  • Djoo
    8 septembre 2011 à 19:47

    Sympa le tuto, je n’aurais plus besoin de te poser la question ;)
    Attention des &nbsp se sont glisser dans le dernier bout de code.

    ++

  • Tef
    11 septembre 2011 à 15:38

    Salut Djoo :) ha ha ha yes mais tu pourras toujours me demander si tu veux ;)

    Merci pour les &nbsp je viens de les enlever !
    Les positions relative et absolute en css c’est pas si compliqué que ça :P Mais il y a probablement plus de subtilité que ce que j’ai expliqué :)

  • Laisser un commentaire


    :
    :
    :