Posicionamento fixo em CSS

Agora vamos entender o posicionamento fixo. É semelhante ao posicionamento absoluto, a diferença se manifesta em como esses tipos de posicionamento se comportam na presença de uma barra de rolagem.

Ao rolar a página, elementos posicionados absolutamente rolarão junto com a página. Veja o exemplo:

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

É possível fazer com que ao rolar a página, o elemento posicionado permaneça no mesmo lugar. Para isso, é necessário definir um posicionamento fixo usando a propriedade position com o valor fixed:

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

#elem {
	position: fixed; /* definimos o posicionamento fixo */
	top: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

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