Fixer une div, guide complet

Fixer un bloc div est assez simple, Steve Pear nous en rappelle les bases et nous montre quelques petites choses moins évidentes qu'on peut faire avec les div fixes. Cool.

Par

Lorsqu’on règle la propriété position sur fixed, la div est maintenue à une certaine place par rapport à la fenêtre du navigateur. Elle ne bouge pas lorsqu’on fait défiler la page. Ça a l’air simple, et ça l’est, mais on peut faire quelques petites choses avec les div fixées qui ne sont pas aussi évidentes. L’objectif de cet article est de vous montrer ce qu’on peut faire en poussant fixed un peu plus loin.

Fixer une div, les bases

La valeur fixed fonctionne dans tous les navigateurs raisonnablement modernes, y compris IE8.

//CSS
.fixed-div
{
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
}

Voyez cet exemple dans CodePen :

See the Pen Fixing a div, basic by Steve Pear (@Tipue) on CodePen.

La div fixée doit être ancrée au moins à un endroit (dans notre exemple, en haut à gauche de la page). Les div fixées sortent du flux normal de la page.

Fixer une div en bas de page

Vous pouvez fixer une div au bas d’une page de la même manière qu’en haut :

//CSS
.fixed-div
{
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
}

Exemple CodePen :

See the Pen Fixing a div to the bottom of a page by Steve Pear (@Tipue) on CodePen.

Fixer une div au centre horizontal

Cette méthode utilise le truc de la marge automatique pour le positionnement absolu à droite et à gauche.

//CSS
.fixed-div
{
     position: fixed;
     top: 70px;
     right: 0;
     left: 0;
     margin: 0 auto;
     width: 120px;
}

Exemple CodePen :

See the Pen Fixing a div to the horizontal center of a page by Steve Pear (@Tipue) on CodePen.

C’est entièrement responsif et ça marche avec les largeurs en pixels ou en pourcentages. La 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.

//CSS
.fixed-div
{
     position: fixed;
     top: 50%;
     left: 50%;
     margin-top: -25px;
     margin-left: -100px;
     width: 200px;
     height: 50px;
}

Exemple CodePen :

See the Pen Fixing a div to the horizontal and vertical center of the viewport by Steve Pear (@Tipue) on CodePen.

Fixer une div au centre du viewport, à la CSS3

Cette méthode utilise l’unité vh de CSS3. Parmi les navigateurs compatibles avec vh, on compte IE9+, Chrome 20.0+, Firefox 19.0+ et Safari 6.0+. En d’autres termes, c’est assez sûr, si toutefois vous ne comptez pas assurer une compatibilité avec IE8.

//CSS
.fixed-div
{
     position: fixed;
     top: 40vh;
     right: 0;
     left: 0;
     margin: 0 auto;
     width: 120px;
}

Exemple CodePen :

See the Pen Fixing a div to the center of the viewport, CSS3 style by Steve Pear (@Tipue) on CodePen.

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

Article du même auteur sur le même thème
Centrer une div, guide complet


Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur CSS parus dans la Cascade.

Tous les articles sur les bases de CSS parus dans la Cascade.


original paru le dans le blog de l’agence Tipue.

Sur l’auteur : est responsable de l’agence Tipue basée à Londres, on peut le suivre sur Twitter.

Traduit avec l’aimable autorisation de Tipue et de l’auteur.
Copyright Tipue © 2014.