position - Cours

Le positionnement des éléments html dans une page est une notion importante pour la mise en page. Les principes sont simples mais les interférences entre les boîtes d'une même page rendent la maîtrise de ces notions assez difficile. Lisez le cours qui suit ainsi que les pages référencées (menu www), traitez les exercices. Seule la pratique permettra une aisance dans l'utilisation de ces notions.

position: static;

Mode par défaut, de ce fait très rarement utilisé dans les déclarations.

position: relative;

Chaque bloc se positionne dans le flux par rapport à son positionnement normal dans le flux.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> float  </title>
        <style>
           div{
                width : 500px;
                border : 1px solid black;
                height: 120px;
           }
           p{
                
                border: 2px dotted green;
           }
           #relatif{
            position: relative;
            top: 10px; /* le haut de la boîte #relative
                        est à 10px en dessous de sa position normale */
            right: -10px; /* le bord droit est à 10px du bord droit 
                           de sa position normale, donc déborde sur la droite.*/         
            background: white;
           }
        </style>
    </head>
    <body>
        <div>
             <p> Paragraphe 1 </p>
             <p id="relatif"> 
                boîte en position relative.
             </p>
             
            <p> Paragraphe 3 </p>
             
            
        </div>
    </body>
</html>

Pour voir certains des problèmes pouvant se poser, modifier la déclaration top: 10px par exemple à 30px : on force une boîte à sortir de son positionnement normal, elle peut chevaucher une autre boîte qui, elle, continue à se placer normalement dans le flux.

Changer la valeur négative en valeur positive pour comprendre comment le positionnement est défini.

Testez d'autres modifications.

position: fixed;

La boîte est retirée du flux normal et positionnée par rapport au conteneur initial (c'est à dire par rapport à la fenêtre d'affichage du navigateur).

Par exemple, le menu gauche de cette page est en position : fixed; left: 5px; top : 30%; : même quand on descend dans la page, il reste à 5px du bord de la fenêtre et son bord supérieur est à 30% de la hauteur du bord supérieur de la fenêtre.

position: absolute;

La boîte est retirée du flux normal et positionnée par rapport à son bloc conteneur ou plutôt par rapport au premier ancêtre lui-même déclaré en position relative ou absolute -- ce qui explique que l'on déclare souvent des blocs en position:relative sans déclarer de position afin que ce bloc soit bien le référentiel dans un placement absolu de leur fils.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> float  </title>
        <style>
           div{
                width : 500px;
                border : 1px solid black;
                height: 120px;
                position: relative; 
           }
           #absolu{
            position: absolute;
            top: 10px; /* le haut de la boîte #absolu 
                        est à 10px du haut de sa boîte conteneur */
            right: -10px; /* le bord droit est à 10px du bord droit 
                            du conteneur, donc déborde sur la droite.*/
            width: 70px;
            border: 2px dotted green;
            background: white;
           }
        </style>
    </head>
    <body>
        <div>
        
             <p id="absolu"> 
                boîte en position absolue.
             </p>
             
             Boîte parent.
             
            
        </div>
    </body>
</html>

Pour avoir une idée des problèmes qui peuvent se poser, supprimer par exemple la déclaration de hauteur pour la boîte parent et observez.

Tentez aussi de remplir de texte la boîte parent : une partie du texte sera cachée par la petite boîte (alors que dans le paragraphe suivant concernant float, le texte va "contourner" la boîte flottante").

Tentez d'autres modifications.

float

float:right

La déclaration float: right sur un élément html va faire 'flotter' la boîte de l'élément concerné à la droite de la boîte de son conteneur (l'élément parent).

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> float  </title>
        <style>
           div{
                width : 500px;
                 
                border : 1px solid black;
           }
           #flottant{
            float: right;
            width: 80px;
             
            border: 2px dotted green;
           }
        </style>
    </head>
    <body>
        <div>
        
             <p id="flottant"> 
                boîte flottante
             </p>
             
             Boîte parent, conteneur de l'élément flottant.
             Boîte parent, conteneur de l'élément flottant.
             Boîte parent, conteneur de l'élément flottant.
             Boîte parent, conteneur de l'élément flottant.
             Boîte parent, conteneur de l'élément flottant.
             Boîte parent, conteneur de l'élément flottant.
             Boîte parent, conteneur de l'élément flottant. 
             
            
        </div>
    </body>
</html>

float:left

Avec cette déclaration, la boîte flotte à gauche de la boîte parent.

clear

On peut règler certains débordements comme ci-dessous.

Décommentez les deux règles commentées pour en voir l'effet.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> flottant qui déborde </title>
        <style>
            #jeflotte{
                float:left;
                width: 30px;
                height: 150px;
                border: 2px solid orange; 
            }
            
            #jecontiensunflottant{
                height: 100px;
                border: 1px solid black;
                margin-bottom: 5px;
                /*  barre de scroll : */
                /* overflow:auto;*/
            }
            
            #jesuccedeaudivcontenantunflottant{
                margin:0;
                border: 1px solid black;
                /* pour que le flottant ne me déborde pas dessus : */
               /* clear: both; */
            }
        </style>
    </head>
    <body>
          <div id="jecontiensunflottant">
          blu blu
            <p id="jeflotte"></p>
         </div>
         
         <div id="jesuccedeaudivcontenantunflottant">
            bla bla
         </div>
    </body>
</html>