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

  • 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

  • sofiane.tati

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

  • mram Administrateur

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

  • mram Administrateur

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

5 Commentaires

  • 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 à 20h16

  • 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 à 09h37

  • mram

    mram Administrateur

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

    le 30/05/2016 à 09h37

  • mram

    mram Administrateur

    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 à 20h22

  • 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 25/05/2018 à 03h24

  • mram

    mram Administrateur

    Bonjour, que vous dit le message d'erreur ?

    le 28/05/2018 à 05h03

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; }