Exercice 17/25

  • Dans le fichier stylesheet.css, attribuez la propriété position et sa valeur static aux deux éléments div;
  • Vous remarquerez que cela ne change rien car c'est leur valeur par défaut;
  • Cliquez sur soumettre ma réponse pour vérifier vos résultats;

Leçon 17/25

Vous venez de voir la première propriété (float) pour positionner vos éléments HTML de façon "radicale".

Il en existe une deuxième (position) et qui affecte aussi le flux courant selon les valeurs qu'elle peut prendre.

  • Positionnement statique (position: static) - n'affecte pas le flux.
    En fait c'est la valeur par défaut de tout élément HTML qui est dans le flux courant. Evidemment, cette valeur n'affecte pas le flux courant, elle est utilisée pour ramener un élément HTML qui était hors du flux à sa valeur par défaut;
  • Positionnement relatif (position: relative) - n'affecte pas le flux.
    Cette valeur permet de décaler un élément dont la position est calculée par rapport à sa position de référence. L'élément reste dans le flux. Cela sert pour effectuer des ajustements de position, comme avec margin par exemple;
  • Positionnement absolu (position: absolute) - affecte le flux.
    Un élément est positionné en absolu par rapport, soit au premier élément ancêtre lui-même positionné (avec position), sinon à l'élément html. Un tel élément sort complètement du flux courant, là où float positionne un élément par rapport à son parent direct. De plus, il ne prend plus toute la largeur disponible par défaut;
  • Positionnement fixe (position: fixed) - affecte le flux.
    Très similaire à la valeur absolute, la différence vient du fait que si la position est précisée (top, bottom, left, right), la référence sera la fenêtre du navigateur. De plus, comme son nom l'indique, l'élément restera fixé à sa position, même en cas de défilement vertical;

Important :
Pour les valeurs absolute, relative, fixed si vous ne précisez pas les valeurs de décalage (ex: top: 5px; left: 5px; bottom: 10px; right: 10px;) par rapport au nouveau point de référence, alors les éléments resteront à leur emplacement par défaut dans le flux.

Les deux div de cet exercice sont par défaut en position static. Dans les exercices suivants, vous allez modifier ce comportement par défaut avec les différentes valeurs vues ci-dessus.

Commentaires les mieux notés

13 Commentaires

  • cyril_hoareau-99

    cyril_hoareau-99

    Bonjour, j'ai un peu de mal à comprendre la fonction du " position-absolute " et celle de " position-fixed ". Auriez-vous une explication un peu modifié que je comprenne ? Merci

    le 11/12/2020 à 07h43

  • meriam

    meriam Admin

    Bonjour, la propriété position et la valeur permet de positionner un élément par rapport à son parent le plus proche à condition que le parent soit positionné, si non le parent soit positionné par rapport au document html. Pour positionner un élément on doit utiliser les propriétés de décalage (left, top,right,bottom)

    le 11/12/2020 à 12h13

  • meriam

    meriam Admin

    Un élément auquel on a attribué position: fixed partage les mêmes règles qu’un élément positionné en absolu, mise à part que c’est la zone d’affichage (fenêtre du navigateur ou du périphérique) qui détermine le placement de l’élément « fixé » (fixed), et non pas un élément parent. D’autre part, un élément fixed ne défile pas avec le document. Il reste… fixe,

    le 11/12/2020 à 12h16

  • patrice-w-36

    patrice-w-36

    Bonjour on me met un message d'erreur et je ne vois pas où est le problème.

    le 24/05/2018 à 23h24

  • mram

    mram Admin

    Bonjour, que vous dit le message d'erreur ?

    le 28/05/2018 à 01h03

  • mram

    mram Admin

    Dans stylesheet.css il ne faut pas ajouter de nouveau sélecteur. Simplement ajouter des propriétés aux sélecteurs #parent et #enfant

    le 07/07/2016 à 16h22

  • phaelier

    phaelier

    Bonjour Je ne comprends pas la correction: "Vérifiez les blocs de déclarations délimités par les { et }. Vous devriez en avoir 2." Je vous remercie

    le 07/07/2016 à 16h16

  • mram

    mram Admin

    Bonjour, il vous manque un point-virgule à la fin de la ligne pour la propriété en question.

    le 30/05/2016 à 05h37

  • sofiane.tati

    sofiane.tati

    Message d'erreur : "VÉRIFIEZ LA SYNTAXE DE LA RÈGLE CSS POUR LA COULEUR DE FOND DU <DIV> ENFANT." ?

    le 30/05/2016 à 05h37

Pour publier un commentaire, vous devez vous connecter.
index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Le positionnement statique</title> </head> <body> <div id="parent"> <div id="enfant"></div> </div> </body> </html>
#parent { height: 200px; width: 100px; border: 2px solid black; background-color: #4D94FF; } #enfant { height: 100px; width: 50px; border: 1px solid black; background-color: #3E76CC; }
http://localhost:8080