EnglishCommencer

Le positionnement en CSS

Les cinq valeurs de position (static, relative, absolute, fixed, sticky), l'élément de référence d'un bloc positionné, top/right/bottom/left et l'ordre d'empilement avec z-index.

  • 22 cartes
  • 4 thèmes
  • Gratuit
Réviser ce deck

Le programme, thème par thème

Le poids de chaque thème suit celui que lui donne l'examen.

  1. Notions
  2. Questions
  3. Ranger et relier
  4. Mises en situation

Quelques cartes du deck

  • position: relative : de quoi s'agit-il ?

    Voir la réponse

    Élément décalé par top, right, bottom ou left depuis sa place normale, qui continue d'occuper cette place, et qui sert de référence à ses descendants absolus.

    Le plus souvent, on l'écrit sans décalage, uniquement pour faire d'un parent la référence d'un enfant absolute.

  • Par rapport à quoi le badge est-il placé ?

    ```html
    <style>
    .badge { position: absolute; top: 0; left: 0; }
    </style>
    <div class="a">
    <div class="b">
    <span class="badge">1</span>
    </div>
    </div>
    `

    • Le coin haut gauche de la page
    • Le coin haut gauche de son parent .b
    • Le coin haut gauche de .a, l'ancêtre le plus haut
    • Sa place normale dans le flux, avec un décalage nul
    Voir la réponse

    Le coin haut gauche de la page

    Aucun ancêtre n'est positionné (tous sont en static), donc la référence est le bloc conteneur initial, ancré au coin haut gauche de la page. Pour accrocher le badge à .b, il faut poser position: relative sur .b.

  • Un élément position: absolute se place par rapport à l'ancêtre … le plus proche, c'est-à-dire dont la position n'est pas ….

    Voir la réponse

    Un élément position: absolute se place par rapport à l'ancêtre positionné le plus proche, c'est-à-dire dont la position n'est pas static.

    Les ancêtres en relative, absolute, fixed ou sticky comptent. Si aucun n'existe, la référence est le bloc conteneur initial : un rectangle de la taille de la fenêtre, posé en haut de la page.

  • position: absolute : de quoi s'agit-il ?

    Voir la réponse

    Élément retiré du flux et placé par rapport à l'ancêtre positionné le plus proche ; à défaut, par rapport au bloc conteneur initial, ancré en haut de la page.

    Retiré du flux, il ne réserve plus de place : ses voisins se rapprochent comme s'il n'existait pas. Il faut donc penser à la hauteur du parent.

  • Un en-tête de tableau est en position: sticky; mais, quand on défile, il disparaît avec le reste au lieu de rester en haut. Quelle est la cause ?

    • Aucun seuil n'est donné : sans top: 0, sticky se comporte comme relative
    • sticky ne fonctionne que sur les tableaux entiers, jamais sur les en-têtes de colonnes
    • sticky exige un z-index supérieur à 1000 pour tenir à l'écran pendant le défilement
    • sticky est remplacé par fixed dès que la page défile verticalement, mais seulement sur mobile
    Voir la réponse

    Aucun seuil n'est donné : sans top: 0, sticky se comporte comme relative

    Il faut dire à partir de quelle distance du bord l'élément se colle : top: 0 pour le haut. Autre piège fréquent : un parent avec overflow: hidden ou auto devient la zone de défilement de référence.

Réviser ce deck