<html> <head> <style> div { border: solid 2px green } #absolutely { position: absolute; top: 16px; right: 16px; height: 64px; } #static { position: static; top: 100px; } #its-all-relative { position: relative; top: 100px; margin-top: 16px; width: 360px; height: 240px; } #inner-relative { position: absolute; bottom: 8px; right: 8px; width: 72px; } #i-fixed-it { position: fixed; bottom: 24px; } #scroll-bar { position: absolute; top: 2000px; } </style> </head> <body> <div id="absolutely"> This is pos: absolute </div> <div id="static"> This is pos: static. It is the default </div> <div id="its-all-relative"> This is pos: relative. It behaves like static... <div id="inner-relative"> But absolute positioned children are relative to this parent </div> </div> <div id="i-fixed-it"> I am pos: fixed. I don't move when the page scrolls </div> <div id="scroll-bar"> Ignore me. I'm just here for the scrollbar </div> </body> </html>