Positionnement relatif
######################

Le positionnement dit **relatif** est relatif à la position normale dans le flux (au positionnement statique).

On indique une variation de la position grace aux propriété CSS ``top``, ``right``, ``bottom``, et ``left``.

Exemple
*******

Prenons l'exemple suivant :

.. code-block:: html

   <p>a</p>
   <p class="item">b</p>
   <p>c</p>

Ce qui donnerait :

.. image:: ../diagrammes/positionnements__relatif__base.svg

Maintenant imaginons que l'on utilise le CSS suivant :

.. code-block:: css

   .item {
      position: relative;
      top:  -10px;
      left: -10px;
   }

Nous obtenons :

.. image:: ../diagrammes/positionnements__relatif__applique.svg

.. seealso::

   `Voir un exemple sur codepen <https://codepen.io/martin-leo/pen/QWGmEGV?editors=1100>`_