La position en CSS : relative, absolute ou fixed ?

On se dit que l’on connait le comportement du positionnement en CSS, mais il arrive bien souvent qu'on soit face à des comportements inattendus, qu'un bloc ne se situe pas là où on le souhaite et qui nous fassent perdre patience. J'aimerais donc vous présenter ici, les notions importantes des différents positionnements en vous expliquant comment ceux-ci fonctionnent. À savoir que le positionnement par défaut d'un élément est dit statice. Si ainsi vous voulez désactiver le positionnement d'un élément, il vous suffira d'ajouter la ligne position: statice; à celui-ci.


Je vous invite également, si vous ne l'avez pas fait, à lire mon précédent article concernant les bases du codage avec des explications sur les div, span, etc... : les bases du codage en HTML


position: relative;

Lorsqu'elle est appliquée, l'emplacement dans lequel il est conservera sa forme dans le flux du document. Les éléments qui sont autour ne seront pas impactés par ce changement de position et conserveront la leur.

Dans l'exemple ci-dessous, je vais ajouter une position relative au bloc #trois en lui modifiant ses valeurs top et left :

HTML

<div class="wrapper">
    <div class="block" id="un">Un</div>
    <div class="block" id="deux">Deux</div>
    <div class="block" id="trois">Trois</div>
    <div class="block" id="quatre">Quatre</div>
</div>


CSS

.wrapper {
    background: red;
    padding: 20px;
}
.block {
    background-color: blue;
    width: 50px;
    height: 50px;
    display: inline-block;
    color: white;
}
#trois {
    position: relative;
    top: 20px;
    left: 20px;
}

La position que l'on redéfinit ici est calculée par rapport à son emplacement initial. Ainsi, en ajoutant 20 pixels en top et en left, il sera juste un peu décalé par rapport aux autres éléments.

Voici le rendu :


position: absolute;

À son application, l'emplacement qu'il occupait dans le flux du document HTML n'existera plus. Sa position est calculée différemment par rapport au relative. Il prendra son plus proche parent possédant un positionnement (qu'il soit relatif, absolu ou fixed). Si aucun n'existe, alors il sera référé directement par rapport au bloc englobant la racine de la page (ex: body).

HTML

<div class="wrapper">
    <div class="block" id="un">Un</div>
    <div class="block" id="deux">Deux</div>
    <div class="block" id="trois">Trois</div>
    <div class="block" id="quatre">Quatre</div>
</div>


CSS

.wrapper {
    background: red;
    padding: 20px;
}
.block {
    background-color: blue;
    width: 50px;
    height: 50px;
    display: inline-block;
    color: white;
}
#trois {
    position: absolute;
    top: 0;
    right: 0;
}

Voici le rendu :

Ici, les blocs "Un", "Deux" et "Quatre" sont collés, car l'emplacement qu'occupait auparavant "Trois" n'est plus. De plus, j'ai indiqué au bloc #trois de se mettre en top: 0; et en right: 0;. Il est donc bien positionné par rapport à l'iframe de cet exemple.


position: fixed;

Le positionnement fixe est similaire à la position absolute, met se cale par rapport à l'écran de l'utilisateur et non pas par rapport au document. Ainsi, cela permet d'avoir des choses comme des éléments en sticky (qui reste flottant en haut de l'écran lorsqu'on scroll).

HTML

<div class="wrapper">
    <div class="block">Un</div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at ullamcorper tellus. Nulla lacinia tempor sem, id malesuada enim molestie ut. Etiam tincidunt tristique dolor a feugiat. Sed feugiat laoreet nunc non efficitur. Mauris vitae nisl sit amet lectus mollis venenatis. Fusce eget purus at enim finibus faucibus eu semper libero. Integer non dolor in nunc feugiat sollicitudin. Suspendisse fringilla mi quis nibh varius ultrices.
        <br>
        <br>Vestibulum mi lectus, porttitor eu ullamcorper eu, sagittis quis sapien. Vivamus pretium nibh vitae turpis cursus, non lacinia justo porttitor. Aenean scelerisque metus turpis, vulputate laoreet odio fermentum quis. Integer euismod justo maximus, semper arcu non, consequat dui. Fusce sed elit non tortor lacinia posuere nec vitae est. Sed vulputate ante a dapibus pulvinar. Aliquam molestie elit vel vestibulum imperdiet. Duis elementum ante non eleifend euismod. Aenean pulvinar eu lacus id convallis. In pellentesque felis id turpis sollicitudin, et commodo orci blandit. Nam at sapien euismod sem ullamcorper scelerisque convallis ac tortor. Curabitur at urna sed augue tincidunt mollis. Praesent quis sagittis mauris, eu pharetra orci. Sed finibus diam id pellentesque pharetra. Maecenas varius rutrum tortor, sed volutpat diam sollicitudin nec. Duis faucibus sapien id ligula vehicula luctus.
        <br>
        <br>In sit amet mauris nec enim interdum pellentesque. Nullam ornare consectetur ex a consectetur. Integer lobortis, massa sit amet fermentum facilisis, arcu dui vulputate sapien, ac ornare sem ipsum ut ipsum. Aliquam dui dui, interdum quis lacus non, euismod lobortis leo. Fusce vel sollicitudin magna, pretium congue ante. Mauris auctor mi sed nulla viverra, nec viverra nibh maximus. Donec ligula turpis, suscipit vel malesuada non, convallis id ipsum. Fusce enim justo, scelerisque sed nisl at, euismod varius diam. Vivamus tincidunt non metus nec tempor. Nulla vulputate purus ipsum, at posuere lacus imperdiet at. Morbi nibh mi, consectetur non nulla vel, cursus lobortis ex. Sed ac ipsum nisi. Praesent vitae justo non leo auctor consectetur. Nulla facilisi. Proin sodales turpis et massa aliquet elementum.
    </p>
</div>


CSS

.wrapper {
    display: flex;
}
.block {
    background-color: blue;
    width: 50px;
    height: 50px;
    display: inline-block;
    color: white;
    position: fixed;
    top: 80px;
    left: 20px;
}
p {
    padding-left: 110px;
}

Voici le rendu :

Le bloc bleu est positionné en haut à gauche de l'iframe. Même en scrollant, il restera à la même place par rapport à notre iframe.

Sources sur le MDN




Il existe un autre type de positionnement, la position: sticky;. Ceci dit, elle est un peu particulière. Je préfère donc vous en parler dans un autre tutoriel.


J'espère que vous en aurez appris un peu plus sur les positions en CSS. Si vous avez des questions, n'hésitez pas à nous rejoindre sur Discord ou à envoyer un mail à contact@xoogge.fr

Nevyin
Présentation de l'auteur.e :
“ Développeur web de métier, gueulard de passion et éternel insatisfait ; toujours occupé à quelque chose et sans cesse maltraité par son gros chat. Nevyin a décidé de créer XOOGGE pour permettre aux administrateurs de forums communiquer plus simplement sur leurs forums. Passant des journées et des nuits entières à travailler sur le projet et à donner du boulot à Niikoneko qui s’ennuyait inlassablement. Aujourd’hui, il est à la recherche du meilleur pour vous offrir la perfection. ”

Nos derniers articles Voir tout

Approfondir votre personnage

Au fil de mes pérégrinations rpgiques, j’ai mis en place quelques astuces pour mieux découvrir mes personnages. Car non, la fiche de présentation n’est pas le seul moyen de bien le connaître, bien au contraire ! Certain·e·s rpgistes - et j...
Le 29/06/2020 à 20:08 • jojofeels
#rpg #article #écriture

Palettes aux merveilles - 10 sites de générateurs de couleurs.

"Je n'ai pas de citation pour cette fois..." - Oxymore. Depuis un certain temps déjà, je m’intéresse au graphisme et au codage surtout, je me suis demandé beaucoup choses. En fait, non, je me pose toujours des questions mêmes les plus inutile...
Le 15/06/2020 à 21:30 • Oxymore
#Aide #CSS #Article #Color

10 et 1 outils gratuit pour le web

Depuis quelques mois, j’ai élargi ma palette d’outils de travail grâce à de très bonnes recommandations, mais aussi des découvertes. Que ce soit pour écrire, faire de la recherche, trouver de l’inspiration, coder et créer, je suis plus q...
Le 01/06/2020 à 22:30 • Kim
#article #codage #tutoriel #écriture #apprendre #graphisme

Commentaires

Aucun commentaire pour cet article. Soit le premier : Identifie-toi
Screenshots par Robothumb