<!-- Apprendre les positions "absolute" et "relative" -->

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

</head>

<body>

    <h2>La position dite: "absolute" et "relative"</h2> <!-- Balise de titre-->

    <p>Avec "absolute" vous pouvez librement placer l'élément où vous voulez dans un bloc.</p> <!-- Balise de paragraphe-->
    <p>Avec "relative" l'élement se place par défaut.</p> <!-- Balise de paragraphe-->

    <!-- ouverture de la première balise -->
    <div class="relative">Cet élément est en: "relative" en position par défaut, par exemple à côté ou en dessous.
         <!-- ouverture de la deuxième balise -->
        <div class="absolute">Cet élément est en: "absolute" il ira où vous voudrez.</div>
    </div>

</body>

</html>

<!-- www.kerneldesign.net 2018 -->
div.relative { /* Appel de la div */
        position: relative; /* Option de la position */
        width: 400px; /* La largeur */
        height: 200px; /* La hauteur */
        border: 3px solid red; /* La couleur */
    } 

    div.absolute { /* Appel de la div */
        position: absolute; /* Option de la position */
        top: 50px; /* L'espace en haut */
        right: 10px; /* L'espace à droite */
        width: 200px; /* La largeur */
        height: 100px; /* La hauteur */
        border: 5px solid blue; /* La bordure avec épaisseur, nature du trait et couleur */
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.