the first nested <div> is positioned exactly how it should...
the 2nd <div> is correct horizontally but vertically i would assume that it is still being positioned relative to the container... meaning that the second <div>'s top: 20; should be more like top: 140; to position it just below the first <div> yet the top: 20; works...

the 3rd one is way off and is nearly impossible to position correctly...

the first nested <div> is positioned exactly how it should...
the 2nd <div> is correct horizontally but vertically i would assume that it is still being positioned relative to the container... meaning that the second <div>'s top: 20; should be more like top: 140; to position it just below the first <div> yet the top: 20; works...

the 3rd one is way off and is nearly impossible to position correctly...<snip>

As Akh mentioned, you must declare your metric units. Your code is doing just as you tell it. Relative positioning is referenced from its normal position in the flow. Thus, top: -32px; means 'shift me up from here by 32px.' An absolute positioned element is referenced from its nearest positioned parent element. Thus top: -32; means 'place me 32 px above the top of my parent container.' There is a subtle, but critical difference.

cheers,

gary

There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.