position: fixed;

Le positionnement fixe est une variante du positionnement absolu : le conteneur de la boîte positionnée est le bloc conteneur intiale, à savoir la zone d'affichage de la fenêtre du navigateur (viewport).
On affecte à la propriété position la valeur fixed.

Une boîte en positionnement fixe est totalement retirée du flux normal : l'emplacement de l'élément dans le code HTML n'a absolument aucune importance.
Elle est ensuite positionnée à l'intérieur de la zone d'affichage de la fenêtre du navigateur suivant les valeurs de ses propriétés top, left, bottom et right.
Le positionnement est calculé par rapport à la bordure de la fenêtre, soit la zone de contenu plus la marge interne.

Le mode de calcul et les possibilités sont les mêmes que pour le positionnement absolu vu précédemment.

Comme la boîte est positionnée par rapport à la zone d'affichage de la fenêtre du navigateur, elle reste toujours visible et ne bouge pas quand on fait défiler le contenu de la page.

Dans les exemples suivants, le contenu de la page est volontairement allongé pour que l'on puisse faire un défilement vertical.

Si on veut réaliser une mise en page avec un en-tête qui reste toujours visible (comme ce tutoriel par exemple), il faut procéder de la façon suivante :

• fixer la largeur de la boîte à la largeur de la fenêtre avec left: 0; et right: 0;
• mettre une marge supérieur à l'élément body plus grande que la hauteur de la boîte pour le contenu du début de la page soit visible.

La réalisation d'un pied de page toujours visible peut être fait de la même façon, à la différence que c'est la propriété bottom qui sera utilisée à la place de top et que c'est la marge inférieur de body qui sera définie pour la fin du contenu de la page soit visible.

Un effet que l'on trouve souvent est l'affichage d'un message ou d'une boîte de dialogue avec un filtre qui recouvre toute la fenêtre et qui empêche toute interaction tant que la boîte de dialogue n'est pas fermée. On appelle celà une boîte de dialogue (ou une fenêtre) modale.
L'exemple suivant montre comment peut être réalisé la chose. On commencera par le montage CSS, sans ajouter d'interactivité.

Explications

La structure HTML est très simple : 2 éléments div imbriqués. Le premier recouvrira toute la fenêtre et le second contient le message.

<div id="cache">
	<div id="message">Cliquez ici pour fermer</div>
</div>	

#cache {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 1;
}

#message {
	position: fixed;
	width: 200px;
	height: 100px;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: 2;
	background: orange;
}