Fixed Positioning in CSS

Now we'll look at fixed positioning. It's similar to absolute, the difference is how these types of positioning behave when there's a scrollbar.

When scrolling the page, absolutely positioned elements will scroll along with the page. See the example:

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

You can make a positioned element stay in place when scrolling the page by setting it to fixed position using the position property with the value fixed:

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

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

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