# Exercice dirigé: Positionnement

## Positionnement: fixed et sticky

A l'aide de la propriété "position" et de ses valeurs "fixed" et "sticky", reproduire la maquette jointe.
- Faire en sorte d'avoir suffisamment de contenu pour avoir un scroll (par exemple, 2 sections ayant chacune 2 articles avec 2 paragraphes)
- Le pied de page est présent en bas de la fenêtre du navigateur, quel que soit le scroll.
- Par défaut, le menu se trouve sous le titre et la phrase d'introduction. Puis au scroll, celui-ci remonte et se cale à 1rem du haut de la page pour rester fixe ensuite.

## Positionnement: relative et absolute

### Position relative
En utilisant la propriété "position", placer la légende de l'image en bas de l'image, conformément à la maquette, avec un fond noir ayant une opacité de 0.6.

### Position absolute
En utilisant notamment la propriété "position", faire en sorte qu'au survol de l'image, celle-ci s'opacifie sur sa totalité et que la légende apparaisse au centre de l'image, comme indiqué sur les maquettes fournies.

## Positionnement: z-index

Bannière pub Easy Lens

- Le contenu fait 300px de large
- La police utilisée est Sanchez (Google font)
- Taille : 14px par défaut, 36px pour le prix et le signe “+”

Utiliser la propriété position pour positionner les éléments de cette bannière.