Where does the space of the relative-positioned div come from?

Why doesn't the relative-positioned div line up at 0,0 like the fixed-positioned div? I've tried setting padding/margin to 0, but it doesn't seem to make any difference.

http://jsfiddle.net开发者_如何学JAVA/helpermethod/cWdWp/4/

because the div with position:relative take as parent the body. The body has automatically padding of 10 pixels (in firefox, in other browsers may differ) . If you add body {padding:0;} will be both in the same place. To overcome "problems" like this, you can use a reset css like this http://meyerweb.com/eric/tools/css/reset/

Example: http://jsfiddle.net/cWdWp/9/

If you are having this problem a lot you can just use Eric Meyers CSS Reset:

http://www.cssreset.com/downloads/css-resets/eric-meyer-reset-css/eric-meyer-reset.css

It reverts all standard browser styles to 0 padding and margins.

It's the default padding on the body. Fixed positioning ignores its container, like absolute positioning does, while relative positions you within the container. body {padding:0;} will fix it.