Positionnement avec CSS et JavaScript
#####################################

Dans cette partie, nous allons (re)voir différents éléments de positionnement en CSS et JS.

CSS positionnement fixe
***********************

La propriété ``position`` admet une valeur ``fixed``. Celle-ci permet d'ôter l'élément ciblé du flux et de le positionner par rapport aux bords de la zone d'affichage visible.

On utilise les propriétés ``top``, ``right``, ``bottom``, et ``left`` pour positionner les éléments.

.. code-block:: css

   .exemple_1 {
      display: fixed;
      // positionnement par rapport à en haut à gauche
      top: 0;
      left: 0;
   }

   .exemple_2 {
      display: fixed;
      // positionnement par rapport à en bas à droite
      top: 0;
      left: 0;
   }

.. note::

   Il est donc possible d'utiliser ``element.style`` pour positionner l'élément en JavaScript.

window.innerWidth et window.innerHeight
***************************************

Ces éléments permettent de connaître la largeur et la hauteur de la zone d'affichage visible.

element.offsetWidth et element.offsetHeight
*******************************************

Ces éléments permettent de connaître la largeur et la hauteur d'un élément donné.

exercice
********

.. code-block:: javascript

   // créez un élément paragraphe

   // ajoutez-lui comme contenu 🔥

   // ajoutez-lui des éléments de style en ligne :
   // positionnement fixe

   //