Auteur: Jérôme Forget. Publié le 26 mars 2007.
Le positionnement fixe est similaire au positionnement en absolu, à la seule différence que le bloc conteneur d'un élément fixe est la fenêtre du navigateur. Dans ce cas, l'élément est complètement retiré du flux normal du document, et se positionne par rapport aux bords de la fenêtre plutôt qu'à tout autre élément de contenu.
Le positionnement fixe peut être utilisé pour créer des effets de fenêtrage. Le fenêtrage est une technique qui consiste à diviser l'écran en plusieurs fenêtres. L'exemple suivant permet de créer deux zones fixes dans l'écran, une occupant la partie gauche, l'autre agissant comme en-tête de la portion de droite :
div#entete { position: fixed; top: 0; bottom: 80%; left: 20%; right: 0; background: gray; }
div#colgauche { position: fixed; top: 0; bottom: 0; left: 0; right: 80%; background: silver; }
div#contenu { position: absolute; top: 20%; bottom: 0; left: 20%; right: 0; }
<div id="entete"></div>
<div id="colgauche"></div>
<div id="contenu"></div>
En remplissant la zone de contenu de texte (du lorem ipsum, par exemple), on remarquera que seule la zone de contenu, positionnée en absolu, permet de défiler si le contenu est trop long.
Le positionnement fixe peut servir à garder toujours visible un élément de navigation dans la fenêtre du navigateur. Le support de cette propriété est malheureusement absent dans les anciennes versions d'Internet Explorer pour Windows, mais ce problème est enfin résolu avec IE7. Même si son usage massif n'est pas recommandé, cette technique peut être utile et intéressante dans certains cas.