Divs for Positioning & Layout
Absolute, Relative, and Fixed Positioning
css for all examples (right click on save to desktop and open in notepad)
HTML has a natural flow from top to bottom. Each item is placed and then the next item is placed after it on the page. Block items, such as p elements, are placed one after another vertically because you can't have two on a line, but inline elements will be placed side by side until the edge of page is reached, then below, etc.
However you can change the position of something by placing it relatively to where it would have been in the natural flow - that is - with an offset. See example where Thomas Jefferson quote is relatively placed with an offset of 400 px
- position: relative;
/*the next line places the item with 600 pixels more space to its left - like a margin - effectively moving it to the right. */
left: 600px;
You can also take something OUT of the natural flow with the absolute property. See example with Karl Popper placed absolutely on the page . In this example note that the absolute item can appear "below" the natural flow or "above" it depending on the value of the z-index. The item's position is still dependent on its ancester.
You can take an item completely out of the natural flow and position it in a fixed relationship to the browser window. This means that as you scroll, the item still stays in the same position in the window - things flow past it as you scroll. See example of an item fixed or "stuck" on the page
Natural Flow vs Float; Alignment
This is covered in the book. Remember that float: left puts the item to the left and everything flows around it to the RIGHT.
In alignment remember you are aligning each child to the parent so the elements to be aligned have to be in the same parent such as a <div>.