Positioning is very important to having a smooth layout on your website. It controls where everything goes on a page so that it is easy to follow. If you have a bad page design and layout, you may find yourself flowing in the wrong direction and reading things before they were supposed to be read.
The relative position in CSS is a powerful tool. It allows you to offset elements relative to themselves. When an element is relative, say for example a picture, it is put into the normal flow of your webpage. You can then move the picture from its current position using top, left, right, bottom. It also does not affect the the normal flow of the document which makes it great for setting specific things like a picture.
Fixed positioning is a very handy tool for creating things like navigation bars. Fixed position removes an element from the flow of the document. Let's say for example you want to make a navigation bar and you want it to always be at the top of your screen, no matter how far down you scroll through the page, so that you can use it without having to scroll all the way back to the top of your page. Giving the nav-bar a position of fixed will do exactly that. It will stick your nav-bar to othe top of your screen rather then your page. You can also move the location of the nav-bar by using the CSS rules top, bottom, left and right just like fixed positioning.
Absolute positioning is great for positioning something on a page, exactly where you want it. Absolute positioning places an element relative to its last ancestor and then removes it from the flow of your document and places the element where you say it should be placed. To move the the element you again use top, bottom, left, right in CSS. It is important to note that having an element positioned absolutely, when you change your browser size (zoom in or change to phone display), becuase it is not in the normal flow of the document, it may overlap with other elements.
MDN positioning for extra reading!