Position fixe en CSS

Ce tutoriel va vous expliquer comment positionner en CSS un élément de manière fixe, aussi bien sur Firefox ou les autres navigateurs alternatifs que sur Internet Explorer 6 et 7.
Commentez cet article : 7 commentaires

Article lu   fois.

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Préambule

S'il est facile de positionner de manière fixe des éléments sur les navigateurs comme Opera, Safari, Firefox ou IE7 qui implémentent en grande partie les propriétés CSS issues des spécifications CSS 2, ce n'est pas le cas sur IE6. Il existe cependant des méthodes pour simuler cette position fixe sur ce dernier, et nous allons voir l'une d'entre elles dans ce tutoriel.

Remarque : Cette méthode n'est fonctionnelle que si Javascript est activé sur le navigateur Internet Explorer 6 du visiteur.

De plus, on estime qu'un DOCTYPE complet et valide est utilisé dans le document dans lequel le code à venir sera placé. Sans cela, le code ne sera pas fonctionnel.

Dans les exemples suivants, on sous-entend que le code exclusif à IE6 est placé dans une feuille de style à part, incluse à l'aide de commentaires conditionnels.
Aussi, on positionnera cet élément, les codes suivants ne venant que compléter celui-ci :

Elément utilisé tout au long du tutoriel
Sélectionnez
<div id="fixe">
    <p>Du texte</p>
</div>
Style correspondant
Sélectionnez
#fixe
{
    background      : #e99898;
    height          : 70px;
    border-bottom   : 2px solid #d07171;
    width           : 100%;
}

#fixe p
{
    margin          : 0;
}

Ce tutoriel est très inspiré d'un billet paru à cette adresse : Making Internet Explorer use position: fixed;

II. Les différents types de positionnement

II-A. Position fixe en haut

Pour positionner notre élément en haut, il va falloir utiliser la propriété top, même si la valeur sera différente sur IE6.

Voici le code :

Position haut
Sélectionnez
#fixe
{
    position        : fixed;
    top             : 0;
}

Et voici le code pour IE6 :

Position haut IE6
Sélectionnez
#fixe
{
    position        : absolute;
    top             : expression( ignore = document.documentElement.scrollTop + "px" );
}

Voir le résultat

II-B. Position fixe en bas

Pour positionner notre élément en bas, il va falloir utiliser la propriété bottom. En revanche, on utilisera à nouveau top pour IE6.

Voici le code :

Position bas
Sélectionnez
#fixe
{
    position        : fixed;
    bottom          : 0;
}

Et voici le code pour IE6 :

Position bas IE6
Sélectionnez
#fixe
{
    position        : absolute;
    top             : expression( ignore = - this.offsetHeight + document.documentElement.clientHeight + document.documentElement.scrollTop + "px" );
}

Voir le résultat

II-C. Position fixe au centre

Pour positionner notre élément au centre, il va falloir utiliser la propriété top, et encore une fois, sa valeur sera différente sur IE6.
La seule différence avec les deux exemples précédents est qu'il faut appliquer en plus une marge négative.

Voici le code :

Position centre
Sélectionnez
#fixe
{
    position        : fixed;
    top             : 50%;
    margin-top      : -36px; /* Correspond à moins la hauteur totale de l'élément fixe (ici 70px + 2px de bordure) divisée par 2 */
}

Et voici le code pour IE6 :

Position centre IE6
Sélectionnez
#fixe
{
    position        : absolute;
    top             : expression( ignore = - this.offsetHeight + document.documentElement.clientHeight / 2 + document.documentElement.scrollTop + "px" );
    margin-top      : 36px;
}

Voir le résultat

Même si cet exemple en lui-même n'est pas très usuel, on peut imaginer plein de cas d'utilisation, comme une fausse popup modale centrée.

III. Exemple de page avec header et footer fixes

Pour avoir un entête et un pied de page fixes, on va utiliser dans le même document les deux premières méthodes précédemment citées.
On ne peut évidemment pas leur donner le même nom, donc voici à quoi pourrait ressembler le code HTML :

Exemple de code HTML pour header et footer fixes
Sélectionnez
<div id="fixe-haut">
    <p>Un très joli bandeau que nous avons là !</p>
</div>

<div id="content">
    <p>Plein de contenu très intéressant ici.</p>
</div>

<div id="fixe-bas">
    <p>Ici le copyright</p>
</div>

En revanche, on va garnir un peu le code CSS pour que notre site ait un peu d'allure :

Code CSS correspondant
Sélectionnez
body
{
    margin          : 0;
    background      : url(fond-body.gif) fixed repeat-x 0 20px;
}

#fixe-haut
{
    background      : #6c123c url(fond-head.gif) repeat-x;
    height          : 70px;
    position        : fixed;
    top             : 0;
    width           : 100%;
    left            : 0;
}

#fixe-bas
{
    background      : #f0f0f0;
    height          : 40px;
    border-top      : 2px solid #dedede;
    position        : fixed;
    bottom          : 0;
    width           : 100%;
    left            : 0;
}

#fixe-haut p
{
    width           : 900px;
    margin          : 0 auto;
    color           : #ccc;
    font            : bold italic 25px times new roman, serif;
    padding-top     : 25px;
}
	
#fixe-bas p
{
    text-align      : center;
    color           : #a7a7a7;
    font            : normal 11px verdana, sans-serif;
    padding-top     : 12px;
    margin          : 0;
}

#content
{
    padding         : 70px 0 42px 0;
    width           : 900px;
    margin          : auto;
    font            : normal 12px verdana, sans-serif;
}

Et les correctifs pour IE6 :

Code CSS correspondant
Sélectionnez
#fixe-haut
{
    position        : absolute;
    top             : expression( ignore1 = document.documentElement.scrollTop + "px" );
}
	
#fixe-bas
{
    position        : absolute;
    top             : expression( ignore2 = - this.offsetHeight + document.documentElement.clientHeight + document.documentElement.scrollTop + "px" );
}

Voir un exemple complet

IV. Aller plus loin...

  • Sur IE6, lors du défilement de la page, vous aurez sans doute remarqué que le décalage n'est pas très fluide. Il existe un moyen très simple de corriger ce problème. Il suffit en effet de mettre un fond fixe au body :
Correction fond fixe
Sélectionnez
body
{
    background      : url(blank.gif) fixed;
}
  • Dans les exemples précédents, notre élément prenait toute la largeur de l'écran. On peut imaginer avoir un élément fixe ne prenant qu'une partie de l'écran en largeur, en renseignant la propriété CSS width avec une autre valeur que 100%, disons par exemple 500px et comme on ne le veut pas au bord, on renseignera également la propriété left avec une autre valeur que 0 :
Element fixe centré
Sélectionnez
#fixe
{
    width           : 500px;
    left            : 50%;
    height          : 300px;
    top             : 0;
    margin-left     : -250px;
    background      : #ccc;
}

V. Remerciements

Merci à RomainVALERI pour la relecture de cet article.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2008 Josselin Willette. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.