Positionnement Fixed, guide d’utilisation

fixedbox-1

Positionner un élément html sur Fixed a été mal exploité jusqu’à l’avènement du responsive design qu’on peut voir sur le menu des sites mobiles car elle ne bouge pas lorsqu’on défile la page.

Ça a l’air simple, mais c’est pas toujours évidentes vu qu’il y a des subtilités à prendre en compte.

Notre objectif serait de vous monter qu’on peut aller loin avec le positionnement fixe.

Fixer une div, les bases

La valeur fixed fonctionne dans tous les navigateurs raisonnablement modernes, y compris IE8, sauf sur de vieille navigateur de type IOS mobile

Sa position sera toujours relative au body.

Fixer une div en bas de page

Vous pouvez fixer une div au bas d’une page juste en specifiant bottom:0

Fixer une div au centre horizontal

Cette méthode utilise la vieille margin auto, que tout le monde connaît déjà je pense.

margin: 0 auto; width: 120px; }

C’est entièrement responsive et ça marche avec les largeurs en pixels ou en pourcentages. Le div fixe doit avoir une propriété width.

Fixer une div au centre horizontal et vertical

Là encore, on utilise les marges pour fixer la div au centre horizontal et vertical du viewport.

Fixer une div au centre du viewport ( du CSS3)

Cette méthode utilise l’unité vh de CSS3.
Supporter par les navigateurs modernes, libre d’utilisation si vous ne comptez pas assurer une compatibilité avec IE8.

L’unité vh utilise des pourcentages, ce qui signifie que 60vh est égal à 60% du viewport. La div fixe doit avoir obligatoire une propriété width.

Répondre