Week 4: Demo


position: relative;

Normal float:left; behavior puts all of the divs side by side from left to right. They are all aligned at the top.

If we want to add new content below the floating divs, we need to do a clear:both; css statement in the next html element. This allows for a carriage return so that new content is once again aligned to the left side of the container, and directly under the previous content.

Adding position:relative; left:30px; top:30px; to the green div offsets its normal position 30px from its left edge and 30px from its top edge.

position: absolute;

Adding position:absolute; left:200px; to the cyan div below forces it 200px away from the edge of the body (in this case, the left edge of the inner browser window). Anything that comes after it in the code will not wrap around it, but rather go underneath it.

However, if the div that contains it has been set to position:relative; it will behave using the offset relative to the parent container as seen below.

position: fixed;

Creating a div that has been set to position:absolute; left:0px; bottom:0px; it will snap the div to the bottom left corner of the browser, essentially attaching it and allowing it to stay in place while the rest of the page scrolls.