Positionnement relatif, absolu et fixe CSS19

Cet exercice consiste à reproduire des modèles en positionnant des éléments html en absolu ou en relatif.

Consignes de l’exercice

Préparation de l’exercice

Créez un dossier racine à l’emplacement de votre choix.

Créez un fichier html intitulé position-css19.html avec la structure de base suivante :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Positionnements relatifs et absolus</title>
    </head>
    <body>


    </body>	
</html>

Créez un fichier css intitulé position-css19.css et liez-le à la page position-css19.html.

Décalage de titre

Observez attentivement l’exemple ci-dessous (faites varier la largeur de la fenêtre si nécessaire), puis reproduisez-le sur la page position-css19.html .

Consulter le code de « Pen » par Julien Crego (@crego) sur CodePen.

Titre avec lettres en cascade

Vous pouvez choisir de créer un nouveau fichier position-css19-2.html auquel vous liez le fichier css ou de travailler à la suite de l’exercice précédent.

Observez attentivement l’exemple ci-dessous, puis essayez de le reproduire.

Consulter le code de « Pen » par Julien Crego (@crego) sur CodePen.

Dans tous les coins

Vous pouvez choisir de créer un nouveau fichier position-css19-3.html auquel vous liez le fichier css ou de travailler à la suite de l’exercice précédent.

Observez attentivement l’exemple ci-dessous, puis essayez de le reproduire.

Consulter le code de « Pen » par Julien Crego (@crego) sur CodePen.

Imbrication de blocs

Vous pouvez choisir de créer un nouveau fichier position-css19-4.html auquel vous liez le fichier css ou de travailler à la suite de l’exercice précédent.

Observez attentivement l’exemple ci-dessous, puis reproduisez-le sur la page position-css19-4.html .

Consulter le code de « Pen » par Julien Crego (@crego) sur CodePen.

Smiley

Vous pouvez choisir de créer un nouveau fichier position-css19-5.html auquel vous liez le fichier css ou de travailler à la suite de l’exercice précédent.

Observez attentivement l’exemple ci-dessous, puis reproduisez-le sur la page position-css19-5.html .

Consulter le code de « Pen » par Julien Crego (@crego) sur CodePen.

Vous pouvez choisir de créer un nouveau fichier position-css19-6.html auquel vous liez le fichier css ou de travailler à la suite de l’exercice précédent.

Observez attentivement l’exemple ci-dessous, puis reproduisez-le sur la page position-css19-6.html en reexploitant le code de l’exercice précédent.

Consulter le code de « Pen » par Julien Crego (@crego) sur CodePen.

Boutons de navigation internes

Vous pouvez choisir de créer un nouveau fichier position-css19-7.html auquel vous liez le fichier css ou de travailler à la suite de l’exercice précédent.

Observez attentivement l’exemple ci-dessous, puis reproduisez-le sur la page position-css19-7.html .

Consulter le code de « Pen » par Julien Crego (@crego) sur CodePen.