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 cause elements to overlap. The normal layout flow is that block elements stack vertically while inline elements line up horizontally. By setting an element's position to absolute, it will not be included in the normal layout flow, and will instead be positioned based on it's top, bottom, left, and right properties.

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.