[Ovillo] Dudas con posicionamiento "absolute", "relative"

[ReynierPM]

Hola listeros:
Estoy teniendo un problema y necesito de la ayuda de ustedes porque entre
más leo más me enredo. El problema es que tengo que posicionar una capa de
fondo y entonces dentro de ella posicionar dos capas más: una que contiene
una imagen (como background) y la otra que contiene un formulario para
iniciar sesion en una aplicación. Estuve leyendo algo sobre el
posicionamiento absoluto o relativo aquí
<http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#propdef-position>
pero aún no me queda del todo claro. Ahora voy a dejarles mi CSS a ver que
hago mal.


#background {
    z-index: 1;
    background: url(../img/loginbck.png) no-repeat;
    height: 271px;
    width: 556px;
    position: relative;
    top: 10em;
    left: 11%;
}
#key {
    z-index: 2;
    background: url(../img/key.png) no-repeat 20% 30%;
    position: relative;
    height: 57px;
    width: 44px;
}

#background es la capa (DIV) sobre la cual debo poner los otros elementos,
#key y #formulario. Los problemas son los siguientes:
1) La propiedad top de la capa #background si le pongo porcentajes no me
corre la misma desde el tope. O sea top: 10%; no pasa nada.
2) Lo mismo pasa con el posicionamiento de la capa #key o sea se me pega al
tope del contenedor en este caso la capa #background y no se corre para
nada.

El HTML es el siguiente:
<div id="background">
<div id="key">&nbsp;</div>
<div id="formulario">&nbsp;</div>
</div>
Que estoy haciendo mal?
Gracias de antemano
-- 
Salu2
ReynierPM | 5to. Ing Informática