LOGO
Position
Understanding how the position property effects how elements move in relation to other elements on the page can be kind of confusing. Relative position maintains the stacking behavior relative to other elements. Absolute and fixed positions basically ignore other elements and the stacking behavior. Again, primarily you'll use relative and absolute so for now just focus on those two. Play around with changing the position of the two elements to see what happens.
It may help to understanding positioning by thinking of it this way...Static elements are flat on the surface of the page, stuck in place. Relative elements are flat on the surface of the page, can be moved around, but must respect space taken up by other elements flat on the page. Absolute and fixed elements float above the surface of the page and can move pretty freely, without respecting space taken up by other elements. Also, Fixed position, as the name suggests, "fixes" an element in place. It stays in the same place even when you scroll up and down the page. The top of this page with the logo and menu is an example of this. Notice how it stays fixed in place as you scroll. There aren't many times you want this effect, so don't worry much about fixed position now. Truly the best way to understand postioning is to continue playing around, changing positions, and see how the layout is affected.