The position property in CSS is used to manipulate and maneuever elements to easily place them in your desired visual place. There are 5 inputs that the position property will allow: static (default), relative, absolute, fixed, inherit. Really, there are only 3 inputs that matter since static is not used unless you are changing the position back to default from another setting. Also, since the position propterty doesn't cascade, one may use the inherit input to tell it to take the property from it's parent, but this is rarely used.
A relatively positioned element's original position remains in the flow of the document, but now the element will accept other inputs of left/right/top/bottom/z-index that work to nudge the element into you desired place on the page.
An element that is given position: absolute will be completely removed from the flow of the document. In other words, other elements will behave is if that element is not even there, and you are able to declare the exact position that you want that element to appear on the page, without interfering with anything else.
One thing to note is that if you do not set a width, the element will only stretch as far as the content that in contains. As well, you can set both left and right values at the same time, causing the element to stretch to both points. Effectively, you could fill an entire page by setting top: 0; bottom: 0; left: 0; right: 0;.
A fixed element is also removed from the flow of the document, like absolute, but it is also positioned relatively to the document, rather than any specific parent. Also, a fixed element is not affected by scrolling, so it will remain in that position indefinitely. This is used typically for persistent visual elements on the page, like a navbar that you want to remain at the top of the page even when scrolling.