Relative, Absolute & Fixed Positioning

With no positioning applied item 2 immediately follows item 1. In this case item 1 is using its allocated space

 

In this picture Item 1 has a relative position applied. Item 2 still comes right after the ALLOCATED space for item 1, but not the actual space so there can be an overlap.

 

In this picture Item 1 has an ABSOLUTE position applied, so item 1 is taken out of the loop and item 2 slides up as if item 1 were not there.

 

This could also be a picture of item 1 with a FIXED position offset. In this case, too, item 2 would ignore item 1.

 

However if you scroll the page with an ABSOLUTE offset, item 1 will scroll off the screen. An absolute offset is applied with respect to the "logical" web page, not what is showing on your screen.

If you keep scrolling the ABSOLUTE item will scroll off the screen.

 

In this example you are seeing the result of scrolling the page when Item 1 is FIXED. A fixed item is displayed like a watermark on a particular place on your screen - it will stay at that place while you scroll meaning that the rest of the page will flow past it.

If you keep scrolling, a FIXED item will always remain on the screen.