Position fixe en CSS

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 :

<div id="fixe">
    <p>Du texte</p>
</div>

#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-A. Position fixe en haut▲

#fixe
{
    position        : fixed;
    top             : 0;
}

#fixe
{
    position        : absolute;
    top             : expression( ignore = document.documentElement.scrollTop + "px" );
}

II-B. Position fixe en bas▲

#fixe
{
    position        : fixed;
    bottom          : 0;
}

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

II-C. Position fixe au centre▲

#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 */
}

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

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 :

<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 :

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 :

#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

• 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 :

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 :

#fixe
{
    width           : 500px;
    left            : 50%;
    height          : 300px;
    top             : 0;
    margin-left     : -250px;
    background      : #ccc;
}

Merci à RomainVALERI pour la relecture de cet article.