Foros del Web » Creando para Internet » CSS »

Bottom en position relative???

Estas en el tema de Bottom en position relative??? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/04/2012, 11:31
Avatar de dryant  
Fecha de Ingreso: agosto-2009
Ubicación: Malaga, Ceuta, España....
Mensajes: 283
Antigüedad: 15 años, 4 meses
Puntos: 10
Bottom en position relative???

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
__________________
Tecnología y tutoriales
  #2 (permalink)  
Antiguo 20/04/2012, 12:34
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 6 meses
Puntos: 269
Respuesta: Bottom en position relative???

algo así?
Código HTML:
Ver original
  1. <div id="container">
  2.     <p> hola </p>
  3.     <div id="footerdelcontainer"> hello </div>
  4. </div>

Código CSS:
Ver original
  1. #container{
  2.     width: 600px;
  3.     height: 400px;
  4.     background: red;
  5.     position: relative;
  6. }
  7. #footerdelcontainer{
  8.     position: absolute;
  9.     bottom: 5px;
  10.     background: yellow;
  11.     width: 600px;
  12. }
  #3 (permalink)  
Antiguo 20/04/2012, 18:23
Avatar de dryant  
Fecha de Ingreso: agosto-2009
Ubicación: Malaga, Ceuta, España....
Mensajes: 283
Antigüedad: 15 años, 4 meses
Puntos: 10
Respuesta: Bottom en position relative???

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?
__________________
Tecnología y tutoriales
  #4 (permalink)  
Antiguo 21/04/2012, 01:18
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 6 meses
Puntos: 269
Respuesta: Bottom en position relative???

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
  #5 (permalink)  
Antiguo 21/04/2012, 04:01
Avatar de dryant  
Fecha de Ingreso: agosto-2009
Ubicación: Malaga, Ceuta, España....
Mensajes: 283
Antigüedad: 15 años, 4 meses
Puntos: 10
Respuesta: Bottom en position relative???

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!!
__________________
Tecnología y tutoriales
  #6 (permalink)  
Antiguo 21/04/2012, 04:06
Avatar de dryant  
Fecha de Ingreso: agosto-2009
Ubicación: Malaga, Ceuta, España....
Mensajes: 283
Antigüedad: 15 años, 4 meses
Puntos: 10
Respuesta: Bottom en position relative???

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?
__________________
Tecnología y tutoriales
  #7 (permalink)  
Antiguo 21/04/2012, 04:12
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 6 meses
Puntos: 269
Respuesta: Bottom en position relative???

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
  #8 (permalink)  
Antiguo 21/04/2012, 04:19
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 6 meses
Puntos: 269
Respuesta: Bottom en position relative???

acá enseñan a centrar una caja absoluta: http://www.librosweb.es/css/capitulo...icalmente.html
  #9 (permalink)  
Antiguo 21/04/2012, 09:17
Avatar de dryant  
Fecha de Ingreso: agosto-2009
Ubicación: Malaga, Ceuta, España....
Mensajes: 283
Antigüedad: 15 años, 4 meses
Puntos: 10
Respuesta: Bottom en position relative???

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

Etiquetas: bottom, position
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:00.