Positionner: la valeur fixed.

Vous avez remarqué que, dans les pages de ce cours, le bandeau en haut et le menu à gauche restent toujours à la même place dans la fenêtre, même si on utilise l'ascenseur pour accéder au contenu caché d'une page trop longue. Ces deux boîtes sont calées sur la fenêtre indépendamment du reste de la page.
C'est la valeur fixed de la propriété position qui permet cela.

Propriétés utiles

Propriété	Valeur
position	fixed
z-index	un nombre entier (0 par défaut)
top	une longueur (en em, px ou %)
left	une longueur
right	une longueur
bottom	une longueur

La propriété position a d'autres valeurs possible, que l'on étudiera plus tard. La valeur par défaut s'appelle static (ne cherchez pas à deviner pourquoi, temps perdu). La valeur fixed permet de fixer un élément à la fenêtre indépendamment du reste de la page.
Les propriétés top, left, right et bottom permettent d'indiquer à quel endroit de la fenêtre l'élément est fixé. Ces propriétés n'ont aucun effet sur un élément en position static.
La propriété z-index permet d'indiquer la position d'un élément par rapport à d'autres en cas de superposition: l'élément de plus grande valeur sera sur le dessus.

Placement

Ainsi que pour les flottants, un élément en position fixed est transformé en un élément de type block, avec la même différence: sa largeur (width) par défaut n'est pas celle de son conteneur mais celle de son contenu.

Dans ce cas, sa boîte (et tout son contenu) est placée par rapport à la fenêtre de navigation, et ne dépend plus de son conteneur. Le navigateur va donc dessiner le reste du document, puis y superposer le dessin de la boite en position fixed. On aura donc deux plans de dessin, et il faudra évidemment décider lequel est devant l'autre (la superposition peut amener le recouvrement de certaines parties). Par défaut, c'est l'ordre des balises dans le code HTML qui décide: les balises qui précèdent seront placées dessous, les suivantes dessus. La propriété z-index permet de modifier ce comportement si nécessaire.

Enfin, pour placer un élément en position fixed dans la fenêtre, les propriétés top, left, right et bottom servent à dire la distance entre un bord de la boîte et le bord correspondant de la fenêtre.
Par exemple, bottom:10px; indique que la boîte sera placée tout près (10px) du bas de la fenêtre, alors que left:50%;right:20%; place la boîte en laissant la moitié de la fenêtre à sa gauche et 20% à sa droite (la largeur de la boîte sera recalculée par le navigateur pour occuper les 30% qui restent).

Exemples

Cette page que vous lisez est divisée en 3 parties, chacune contenue dans des balises div de classes différentes (bandeau, menu, exo). Regardez son code source. Les div de classes bandeau et menu sont en position fixed. Le bandeau a une hauteur fixe (6em) et une largeur de 100%. Ses propriétés top et left ont la valeur 0px. Le débordement éventuel est contrôlé par un ascenseur (overflow:auto;). Le menu est large de 20% et haut de 100%. Pour que ces deux boîtes ne recouvrent pas le texte de la page, il faut penser à mettre deux marges haute et gauche à body (6em et 20%) pour compenser.
Pour mettre le bandeau en bas de la fenêtre, il suffirait de remplacer top:0px; par bottom:0px; et d'enlever la marge haute de body pour la mettre en bas.

Dans le second exemple illustré ci-contre, un bandeau est fixé à une faible distance du bas de la fenêtre et au-dessus du reste de la page. Selon la façon dont le code html est écrit, il aura donc peut-être fallu lui donner un z-index de 1 (la page est à 0 par défaut). Ce bandeau a visiblement un fond blanc pas tout à fait opaque (opacity légèrement moins que 1), de sorte qu'on distingue le texte de la page à travers.