Week 4: Demo

Position

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.