We've changed the look of our content so far, but we haven't really changed it's position from the default given by the web browser. There are 3 main CSS properties that we'll use to change a webpage's layout: position, display, and float.
The position property is the main one to use to change where an HTML element is displayed in a web page. It has 4 main values that we can use to set the position of an element: static, relative, absolute, and fixed. Out of these, static is the default that HTML elements will use normally.
For the relative position value this allows us to set an HTML element's position relative to where it would normally be in the webpage (relative to what its position was with the static setting). To change a webpage's positioning you can change it's margins, or use these 4 helpful (and here, more appropriate) properties: top, left, bottom, and right. For these 4 properties we can give size values just as we did for margins and paddings, but setting top: 14px will move my element 14 pixels down from where it otherwise would be.
For absolute positioning we're going to take the HTML element out of the normal flow of the page and position it relative to the top, upper-left corner of the page. Now when I give values for margins or for the top, bottom, left, and right properties it will be relative to the top of the webpage.
The fixed positioning setting is similar to absolute positioning, but with one key twist. My HTML element will still be taken out of the normal flow of the webpage, but now its position will be relative to the upper-left corner of the web browser window rather than my webpage. This is a key difference. Now when you scroll down in the webpage this HTML element will appear to keep the same position in your window. It's scrolling down the page with you. This can be a neat trick for always keeping navigation menus visible in the page for designing other interesting presentations.