CSS3 – Positionnement : fixed, relative, absolute et la notion de z-index

LEÇON

 

Positionnement - les principes

Il y a 4 types de positionnement :

  • static (par défaut)
  • fixed
  • relative
  • absolute

 

Pour les types fixed, relative et absolute, on peut spécifier des valeurs pour top, right bottom, left.

 

Exemple :

#fenetre
{
  background-color:black;
  color:green;
  position:fixed;
  top:20px;
  left:20px;
}

 

Static : positionnement de l'élément dans le flux de la page - ceci est le comportement par défaut.

Fixed : positionnement de l'élément avec les coordonnées top, right bottom, left relatif à la fenêtre du navigateur. N'est pas affecté par le scroll (ascenseurs).

Relative : positionnement de l'élément avec les coordonnées top, right bottom, left relatif à sa position normale dans le flux (relatif à là où il devrait se trouver sans positionnement).

Absolute : positionnement de l'élément avec les coordonnées top, right bottom, left relatif au premier parent positionné (premier ancêtre avec positionnement non-static)

 

Positionnement - exemples

 

Exemple 1 :

 

body
{
  background-color:#f8f8f8;
  width:990px;
  margin:0 auto;
}

p
{
  background-color:pink;
  margin:20px;
  padding:10px;
}

#fixed
{
  position:fixed;
  top:40px;
  left:140px;
  width:240px;
  padding:30px;
  background-color:skyblue;
}

#relative
{
  position:relative;
  top:0px;
  left:200px;
  width:730px;
  background-color:orange;
}

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Margin et padding</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida ipsum in nisl rhoncus, nec egestas ligula fermentum. Proin at est id est placerat volutpat. Cras nisl sem, facilisis nec tortor in, volutpat suscipit nisi. Praesent congue blandit arcu, non luctus odio tempus ut. In ullamcorper lacinia lectus eget mattis. Vivamus varius purus eget placerat tempor. Praesent ut bibendum mi, convallis vestibulum sem. Duis venenatis velit sit amet egestas aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis orci vitae arcu pulvinar, ac pellentesque ligula vulputate.
        </p>
        <p>
          Donec gravida ipsum in nisl rhoncus, nec egestas ligula fermentum. Proin at est id est placerat volutpat. Cras nisl sem, facilisis nec tortor in, volutpat suscipit nisi. Praesent congue blandit arcu, non luctus odio tempus ut. In ullamcorper lacinia lectus eget mattis. Vivamus varius purus eget placerat tempor. Praesent ut bibendum mi, convallis vestibulum sem. Duis venenatis velit sit amet egestas aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis orci vitae arcu pulvinar, ac pellentesque ligula vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
        <p id="fixed">
          In ullamcorper lacinia lectus eget mattis. Vivamus varius purus eget placerat tempor. Praesent ut bibendum mi, convallis vestibulum sem. Duis venenatis velit sit amet egestas aliquam. Cum sociis natoque penatibus elit. Proin at est id est placerat volutpat. Cras nisl sem, facilisis nec tortor in, volutpat suscipit nisi.
        </p>
        <p>
          Cras nisl sem, facilisis nec tortor in, volutpat suscipit nisi. Praesent congue blandit arcu, non luctus odio tempus ut. In ullamcorper lacinia lectus eget mattis. Vivamus varius purus eget placerat tempor. Praesent ut bibendum mi, convallis vestibulum sem. Duis venenatis velit sit amet egestas aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis orci vitae arcu pulvinar, ac pellentesque ligula vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida ipsum in nisl rhoncus, nec egestas ligula fermentum. Proin at est id est placerat volutpat.
        </p>
        <p id="relative">
          Proin at est id est placerat volutpat. Cras nisl sem, facilisis nec tortor in, volutpat suscipit nisi. In ullamcorper lacinia lectus eget mattis. Vivamus varius purus eget placerat tempor. Praesent ut bibendum mi, convallis vestibulum sem. Duis venenatis velit sit amet egestas aliquam. Cum sociis natoque penatibus elit.
        </p>
        <p>
          Praesent ut bibendum mi, convallis vestibulum sem. Duis venenatis velit sit amet egestas aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis orci vitae arcu pulvinar, ac pellentesque ligula vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida ipsum in nisl rhoncus, nec egestas ligula fermentum. Proin at est id est placerat volutpat. Cras nisl sem, facilisis nec tortor in, volutpat suscipit nisi. Praesent congue blandit arcu, non luctus odio tempus ut. In ullamcorper lacinia lectus eget mattis. Vivamus varius purus eget placerat tempor.
        </p>
    </body>
</html>

Affichage dans Chrome :

css_positionnement_1

Remarquer :

  • le paragraphe avec position:fixed ne consomme pas du flux
  • le paragraphe avec position:relative consomme du flux (la position du dernier paragraphe est affectée par la présence du paragraphe avec position:relative).
  • le paragraphe avec position:fixed reste immobile quand la fenêtre du navigateur est scrollée

 

Exemple 2 :

 

body
{
  background-color:#f8f8f8;
  width:990px;
  margin:0 auto;
}

#sidebar
{
  float:right;
  width:400px;
  position:relative;
  top:0px;
  left:0px;
  background-color:pink;
  margin-left:20px;
  padding:0px 20px;
}

#absolute
{
  position:absolute;
  top:50px;
  left:50px;
  background-color:orange;
  width:300px;
  padding:20px;
}

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Margin et padding</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="sidebar">
          <p>
            Cras nisl sem, facilisis nec tortor in, volutpat suscipit nisi. Praesent congue blandit arcu, non luctus odio tempus ut. In ullamcorper lacinia lectus eget mattis. Vivamus varius purus eget placerat tempor. Donec gravida ipsum in nisl rhoncus, nec egestas ligula fermentum. Proin at est id est placerat volutpat. Cras nisl sem, facilisis nec tortor in, volutpat suscipit nisi. Praesent congue blandit arcu, non luctus odio tempus ut. In ullamcorper lacinia lectus eget mattis. Vivamus varius purus eget placerat tempor. Praesent ut bibendum mi, convallis vestibulum sem. Duis venenatis velit sit amet egestas aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis orci vitae arcu pulvinar, ac pellentesque ligula vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </p>
          <p id="absolute">
            In ullamcorper lacinia lectus eget mattis. Vivamus varius purus eget placerat tempor. Praesent ut bibendum mi, convallis vestibulum sem. Duis venenatis velit sit amet egestas aliquam. Cum sociis natoque penatibus elit. Proin at est id est placerat volutpat. Cras nisl sem, facilisis nec tortor in, volutpat suscipit nisi.
          </p>
        </div>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida ipsum in nisl rhoncus, nec egestas ligula fermentum. Proin at est id est placerat volutpat. Cras nisl sem, facilisis nec tortor in, volutpat suscipit nisi. Praesent congue blandit arcu, non luctus odio tempus ut. In ullamcorper lacinia lectus eget mattis. Vivamus varius purus eget placerat tempor. Praesent ut bibendum mi, convallis vestibulum sem. Duis venenatis velit sit amet egestas aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis orci vitae arcu pulvinar, ac pellentesque ligula vulputate.
        </p>
        <p>
          Donec gravida ipsum in nisl rhoncus, nec egestas ligula fermentum. Proin at est id est placerat volutpat. Cras nisl sem, facilisis nec tortor in, volutpat suscipit nisi. Praesent congue blandit arcu, non luctus odio tempus ut. In ullamcorper lacinia lectus eget mattis. Vivamus varius purus eget placerat tempor. Praesent ut bibendum mi, convallis vestibulum sem. Duis venenatis velit sit amet egestas aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis orci vitae arcu pulvinar, ac pellentesque ligula vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
        
    </body>
</html>

Affichage dans Chrome :

css_positionnement_2

 

Remarquer :

  • le paragraphe avec position:absolute est positionné par rapport à la div
  • le paragraphe avec position:absolute ne consomme pas du flux (pour tester ceci : ajouter un paragraphe ordinaire dans la div sidebar juste après le paragraphe avec position:absolute, et remarquer qu'il est positionné juste en dessous du 1er paragraphe).

 

z-index

On utilise le z-index d'un élément pour contrôler sa visibilité par rapport aux éléments qu'il chevauche.

 

Exemple :

 

body
{
  background-color:#f8f8f8;
  width:990px;
  margin:0 auto;
}

#sidebar
{
  float:right;
  width:400px;
  position:relative;
  top:0px;
  left:0px;
  background-color:pink;
  margin-left:20px;
  padding:0px 20px;
}

#absolute
{
  position:absolute;
  top:50px;
  left:50px;
  background-color:orange;
  width:260px;
  padding:20px;
  z-index:30;
}

#absolute2
{
  position:absolute;
  top:150px;
  left:150px;
  background-color:skyblue;
  width:220px;
  padding:20px;
}

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Margin et padding</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="sidebar">
          <p>
            Cras nisl sem, facilisis nec tortor in, volutpat suscipit nisi. Praesent congue blandit arcu, non luctus odio tempus ut. In ullamcorper lacinia lectus eget mattis. Vivamus varius purus eget placerat tempor. Donec gravida ipsum in nisl rhoncus, nec egestas ligula fermentum. Proin at est id est placerat volutpat. Cras nisl sem, facilisis nec tortor in, volutpat suscipit nisi. Praesent congue blandit arcu, non luctus odio tempus ut. In ullamcorper lacinia lectus eget mattis. Vivamus varius purus eget placerat tempor. Praesent ut bibendum mi, convallis vestibulum sem. Duis venenatis velit sit amet egestas aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis orci vitae arcu pulvinar, ac pellentesque ligula vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </p>
          <p id="absolute">
            In ullamcorper lacinia lectus eget mattis. Vivamus varius purus eget placerat tempor. Praesent ut bibendum mi, convallis vestibulum sem. Duis venenatis velit sit amet egestas aliquam. Cum sociis natoque penatibus elit. Proin at est id est placerat volutpat. Cras nisl sem, facilisis nec tortor in, volutpat suscipit nisi. In ullamcorper lacinia lectus eget mattis. Vivamus varius purus eget placerat tempor. Praesent ut bibendum mi, convallis vestibulum sem. Duis venenatis velit sit amet egestas aliquam.
          </p>
          <p id="absolute2">
            In ullamcorper lacinia lectus eget mattis. Vivamus varius purus eget placerat tempor. Praesent ut bibendum mi, convallis vestibulum sem. Duis venenatis velit sit amet egestas aliquam. Cum sociis natoque penatibus elit. Proin at est id est placerat volutpat. Cras nisl sem, facilisis nec tortor in, volutpat suscipit nisi. In ullamcorper lacinia lectus eget mattis. Vivamus varius purus eget placerat tempor. Praesent ut bibendum mi, convallis vestibulum sem. Duis venenatis velit sit amet egestas aliquam.
          </p>
        </div>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida ipsum in nisl rhoncus, nec egestas ligula fermentum. Proin at est id est placerat volutpat. Cras nisl sem, facilisis nec tortor in, volutpat suscipit nisi. Praesent congue blandit arcu, non luctus odio tempus ut. In ullamcorper lacinia lectus eget mattis. Vivamus varius purus eget placerat tempor. Praesent ut bibendum mi, convallis vestibulum sem. Duis venenatis velit sit amet egestas aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis orci vitae arcu pulvinar, ac pellentesque ligula vulputate.
        </p>
        <p>
          Donec gravida ipsum in nisl rhoncus, nec egestas ligula fermentum. Proin at est id est placerat volutpat. Cras nisl sem, facilisis nec tortor in, volutpat suscipit nisi. Praesent congue blandit arcu, non luctus odio tempus ut. In ullamcorper lacinia lectus eget mattis. Vivamus varius purus eget placerat tempor. Praesent ut bibendum mi, convallis vestibulum sem. Duis venenatis velit sit amet egestas aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis orci vitae arcu pulvinar, ac pellentesque ligula vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
    </body>
</html>

 

Affichage dans Chrome :

css_positionnement_3

 

IMPORTANT : Pour que la propriété z-index marche, elle doit être appliquée à un élément qui est positionné (la valeur de la propriété position doit être autre chose que static).

 

 


 

EXERCICES

 

1. Utiliser le positionnement pour reproduire la page suivante. La bannière doit être centrée dans la fenêtre du navigateur.

 

css_positionnement_ex1

2. Avec une exploitation efficace des propriétés float, position et z-index, reproduire la page suivante

css_positionnement_ex2Il devrait être possible de changer la page pour ressembler à la suivante, en ne changeant que les propriétés z-index :

css_positionnement_ex2b

3. Reproduire la page suivante en respectant ces besoins :

  • le contenu de la page est centré dans la fenêtre du navigateur, avec largeur 960 pixels
  • l'image principale est incluse dans la page avec la balise <img> (interdiction de l'inclure via css / background-image)
  • le sous-titre de l'image (le texte superposé) est bien du texte et ne fait pas partie de l'image - on devrait donc pouvoir changer le sous-titre dans le HTML, sans manipulation graphique
  • l'arrière plan du sous-titre (barre noire semi-transparente) ne fait pas partie de l'image - on devrait pouvoir changer la couleur et le niveau d'opacité de l'arrière plan sans manipulation de l'image principale. Pour ceci vous avez 2 options :
    • l'arrière plan du sous-titre est un fichier graphique à part (fichier png)
    • la couleur et le niveau d'opacité de l'arrière plan sont spécifiés dans le css
  • le sous-titre est calé sur l'image - si le 1er paragraphe grandit, et l'image est poussée vers le bas en conséquence, le sous-titre doit bouger avec - autrement dit : quelque soit la position de l'image, le sous-titre se trouve toujours au même endroit par rapport à l'image

css_positionnement_ex3