Absolute Positioning

This lesson is part of the Web Programming 1 Course.

You can control the position of an element within the browser window by setting the position property to absolute.

This will take the element out of the normal layout flow, which could case elements to overlap. The normal layout flow is that block elements stack vertically while inline elements line up horizontally.

Once you set position to absolute, you can also the set the top, bottom, left, and/or right properties, like so:

#some-element{
	position: absolute;
	top: 10px;
	right: 20px;
}

The element that this rule set targets will be removed from the normal flow in relation to other elements and will be positioned 10px from the top edge of the browser window and 20px from the right edge of the browser window.