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.

.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

// créez un élément paragraphe

// ajoutez-lui comme contenu 🔥

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

//