Posicionamiento fijo en CSS

Ahora vamos a analizar el posicionamiento fijo. Es similar al posicionamiento absoluto, la diferencia se manifiesta en cómo se comportan estos tipos de posicionamiento en presencia de una barra de desplazamiento.

Al desplazar la página, los elementos posicionados absolutamente se desplazarán junto con la página. Mira el ejemplo:

<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;
}

Se puede hacer que al desplazar la página, el elemento posicionado permanezca en su lugar. Para ello, hay que asignarle un posicionamiento fijo mediante la propiedad position con el valor fixed:

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

#elem {
	position: fixed; /* asignamos posicionamiento fijo */
	top: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

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