Absolute Positioning of Elements in CSS

In this lesson, we will look at absolute positioning of elements. It allows you to place elements at specified page coordinates. For example, you can place an element at 100px from the top of the page and 200px from the left. The element will move there, regardless of the fact that other elements will be located there and will simply become on top of them. They say that in this case, the element falls out of the normal flow of the document: all other elements will behave as if our element does not exist.

To make an element absolutely positioned, the element needs to have its position property set to absolute. In addition to this property, two more are needed: one will set the vertical coordinate, and the second - the horizontal one.

For vertical, you need to set either top or bottom indentation. Top indentation is set by the top property, and bottom indentation is set by the bottom property. For horizontal, you need to set either left or right indentation. Left indentation is set by the left property, and right indentation is set by the right property.

Let's look at some examples.

Example

To start, let's just make two boxes with no positioning (note that the elements aren't flush to the edge of the window, since body has margin by default):

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Example

Let's now give the green block absolute positioning, placing it at the top position of 150px and the left position of 100px:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 150px;
	left: 100px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Example

Let's now put the green block at position 0px top and 0px left:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Example

Let's now put the green block at position 0px top and 0px right:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Example

Let's now put the green block at position 0px from the bottom and 0px from the right:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Example

Let's now put the green block at position 0px bottom and 0px left:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Practical tasks

Using absolute positioning, place the blocks as follows: