Bienvenue sur le site de Jef

La position fixe, comme la position absolue permet de placer une boîte par rapport aux limites de la zone d’affichage ou du conteneur.

Exemple d'un menu fixe vertical.

Comme dans un positionnement absolu, le contenu d'une position fixe est retiré totalement du flux.
Mais il est cette fois positionné uniquement par rapport aux limites de la zone de visualisation, autrement dit la fenêtre du navigateur.
Le défilement de la page n'a aucun effet sur un contenu en position fixe.

Pour fixer un menu de navigation, par exemple, dans une colonne vide à gauche ou à droite du contenu,on définira les largeurs du contenu et du menu.
Code CSS:

.menufixe  { position:fixed; top:150px; left:2px; width:150px; }
.contenu   { width:500px; height:auto; margin:0 0 0 190px; }

Malheureusement, le positionnement fixe n'est pas reconnu par Internet Explorer 5 et 6 Windows.
Il va falloir utiliser un positionnement absolu à la place et en utilisant une formulation de style qui joue sur des syntaxes CSS2 ignorées par MSIE.
Ainsi html>body placé devant une classe ou un id ne sera pas interprété par MSIE.
Voici comment coder le style:

.menufixe  { position:absolute; top:150px; left:2px; width:150px; }
html>body .menufixe { position:fixed; }
.contenu   { width:500px; height:auto; margin:0 0 0 190px; }

Exemple d'un menu fixe horizontal.

Pour éviter de sacrifier une partie de la largeur d'affichage, il faut créer une barre de menu horizontale que l'on pourra fixer en permanence en haut.

.menufixe { position:absolute; top:0; left:1%; width:98%; 
            margin:0; line-height:3em; }
html>body .menufixe { position:fixed; }
.contenu  { height:auto; margin:0 2em; padding:2em; }

Il est aussi possible de mettre un bandeau en haut de la page

Attention à la transparence du menu

Oui! il y a toujours un danger, suivant la solution de mise en page adoptée.
Et parfois la transparence peut jouer des tours.