Positionnement fixe en CSS

Maintenant, nous allons analyser le positionnement fixe. Il est similaire au positionnement absolu, la différence se manifeste dans la manière dont ces types de positionnement se comportent en présence d'une barre de défilement.

Lors du défilement de la page, les éléments positionnés de manière absolue défileront avec la page. Regardez l'exemple :

<div id="elem"></div>
<div id="content">
	some long text
</div>

#elem {
	position: absolute;
	top: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

#content {
	margin: 0 auto;
	width: 300px;
	text-align: justify;
	font: 16px Arial;
}

Il est possible de faire en sorte que lors du défilement de la page, l'élément positionné reste en place. Pour cela, il faut lui attribuer un positionnement fixe en utilisant la propriété position avec la valeur fixed :

<div id="elem"></div>
<div id="content">
	some long text
</div>

#elem {
	position: fixed; /* on définit le positionnement fixe */
	top: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

#content {
	margin: 0 auto;
	width: 300px;
	text-align: justify;
	font: 16px Arial;
}