Bottom en position relative???

[dryant]

Hola tengo un div #container de 400 de alto por 600 de ancho con una imagen de fondo y quiero oner otro div dentro de este, al bottom separado 5 px de su parte inferior. al 2º div #footerdelcontainer (por llamarlo de alguna manera) Le he dado una position relative, para que coja la posicion en funcion al div que la contiene, y con un bottom:5px..... pero nada... no funciona, y ademas de no ponerse a 5px del "suelo" del div #container se me sube 5 px por encima del "techo" del div # container. Tampoco me funciona con margin-bottom:5px....
¿porque sucede esto y coo lo arreglo?
Gracias

[cristian_cena]

algo así?

Código HTML:

<div id="container">
    <p> hola </p>
    <div id="footerdelcontainer"> hello </div>
</div>​
 

Código CSS:

#container{ 
    width: 600px;
    height: 400px;
    background: red;
    position: relative;
}
#footerdelcontainer{
    position: absolute;
    bottom: 5px;
    background: yellow;
    width: 600px;
}
 

​

[dryant]

Bueno....Funciono perfecto!!!
Pero entonces... tengo una pequeña confusion.....
Yo creia que position:absolute se posicionaba en funcion a la pantalla y relative se posicionaba en funcion al elemento que lo contenia... pero por lo que veo es al reves
¿No?

[cristian_cena]

En librosweb.es en la guía de css, hay un capitulo "posicionamiento y visualizacion" creo que se llama, dedicado a explicar detalladamente este tema. Brevemente, se podría decir que:

• Por defecto todas las cajas son estáticas, es decir, responden al flujo de documento, se colocan de arriba a abajo y de izquierda a derecha según lo que haya en el código. Sus relación /cotas/ con otras cajas está dada por el margen.
• Las cajas relativas, también responden al flujo de documento, pero además te permite trabajar con las propiedades top/left/bottom/right y por sobre todo, te permite crear contenedores para cajas absolutas.
• Una caja absoluta busca posicionarse respecto de su ancestro relativo más próximo y si no lo encuentra lo hace respecto de body. Sus cotas ya no se asocian al flujo de documento sino que dependen de la esquina superior izquierda de su ancestro relativo o de body.
• Las cajas fijas establecen sus cotas respecto de la esquina superior izquierda de la ventana.

Espero haberte ayudado

[dryant]

Muchisimas gracias!!
Me has ayudado muchisimo y me has despejado una duda que tenia de hace tiempo, con el tema que mas se me ha atravesado en CSS.
Gracias!!

[dryant]

Una ultima pregunta:
Y ahora que ya he conseguido esto, he estado intentando centrar el footer respecto a container, pero no me funciona margin:auto;
ni margin-left: auto con margin-right:auto;
Entonces ya no se puede centrar automaticamente ahora al tener position absolute?

[cristian_cena]

Me alegra dryant
Aprovecho para corregirme para cajas absolutas y fijas: con top/left/right/bottom podes tomar cualquier esquina como punto de partida.
Salutes

pd: usa margin: 0 auto; las cajas de bloque toman un width igual a 100% por defecto, asegurate de dar valor a esta propiedad. margin:0 auto; funciona con posiciones estatica y relativa

[cristian_cena]

acá enseñan a centrar una caja absoluta: http://www.librosweb.es/css/capitulo...icalmente.html

[dryant]

Buenisimo!
Ya la he centrado, ya me he descargado la guia, y la estoy estudiando.
Muchisimas Gracias!
Un saludo y hasta la proxima!