All you need to know about CSS Position for conscious work.

Position: static

All elements on a page have a "static" position by default. This means that the element is not moved, and it appears in the same order as it appears in the HTML markup.

#content {
	position: static;
}

You don't need to assign this property to any element, unless you need to change a previously set positioning to the default.

Position: relative

Relative positioning allows you to use the top, bottom, left, and right properties to position an element relative to where it would appear if positioned normally.

Let's move #content 20 pixels down and 40 pixels to the right.

#content {
	position: relative;
	top: 20px;
	left: 40px;
}

Notice that there is now an empty space where our #content block should have been. Following the #content block, the #footer block has not moved lower, because #content still occupies its place in the document, even though we moved it.

At this point, it may seem that relative positioning is not that useful, but, don't jump to conclusions, later in the article, you will learn what you can use it for.

Position: absolute

With absolute positioning the element is removed from the document and appears where you tell it to.

Let's, for the sake of example, move the #block-a block to the top, right corner of the page and change size:

#block-a {
	position: absolute;
	top: 0;
	right: 0;
	height: 100px;
	width: 200px;
}

Note that this time, since #block-a was removed from the document, the remaining elements on the page are positioned differently: #block-b, #block-c, and #footer have moved up to where the removed block was. And #block-a itself is positioned exactly in the top-right corner of the page.

Thus, we can position any element relative to the page, but this is not enough. In fact, we need to position #block-a relative to the parent #content block. And at this point, relative positioning comes back into play.

Position: fixed

Fixed positioning is a subset of absolute positioning. The only difference is that it is always in the visible area of the screen, and does not move while scrolling the page. In this respect, it is a bit like a fixed background image.

#block-a {
	position: fixed;
	right: 0;
	bottom: 0;
	height: 100px;
	width: 200px;
}

Position: sticky

The element behaves as relative up to a certain point, after which it "sticks" to a specified position (e.g., top: 0) and remains there until its parent block moves out of the viewport.

#header {
	position: sticky;
	top: 20px;
}

Position: absolute inside relative

By assigning relative positioning to the parent block, we can position any child elements relative to its boundaries.

Let's place the #block-a in the top right corner of the #content block.

#content {
	position: relative;
}

#block-a {
	position: absolute;
	top: 0;
	right: 0;
	height: 100px;
	width: 200px;
}

Float

For variable height columns, absolute positioning is not suitable, so let's look at another option.

By assigning float to a block, we will push it to the right (or left) edge as much as possible, and the text following the block will flow around it. Usually this technique is used for images, but we will use it for a more complex task, as it is the only tool we have at our disposal.

#block-a {
	float: left;
	height: 200px;
	width: 200px;
}

Summary

Only the most basic positioning techniques and the simplest examples have been covered today, but at the same time, these are the ones that are usually used.