This lesson will introduce concepts important to building a css webpage layout using the "position" property. You will learn how the position property interacts with a document's linearitazion (document flow) and how to manipulate each poition option to move things around on the page.
First, let's describe something simple but important: document flow. Document flow is simply the natural linear progression of how elements appear in the code, from top to bottom. The browser will want to show items in a page as it encounters each of them in a 1-2-3 fashion. Simple, right?
Below is a link to a simplified practice page you can visit to make real-time live adjustments using your browser's inspector.
In the Inspector Practice Page, that are two main containers: the first is positioned as "relative" while the second is set to the default "static." You will notice that the background images tell you which one is which. Right-click on the boxes to inspect the element and try to change the position of them using "absolute" and "fixed" along with the offsets: "left:", "right:", "top:", "bottom:", "z-index:". See how they behave. Also, feel free to adjust the height and width of the boxes using pixels and/or percentages.
OPEN PRACTICE PAGE