Como evito que se solapen estas cajas?

asdasd22 · #1 (**permalink**) 24/12/2013, 10:14

Hola tengo este problema

La caja verde tiene alto variable, crece segun el contenido.

La caja Azul quiero que quede anclada al borde inferior por lo que la tengo asi

Código CSS:

Ver originalposition: absolute;
bottom: 0;

El problema es que la caja verde se solapa detras de la Azul cuando crece lo suficiente.
Como podría evitar este comportamiento?

Gracias desde ya.

pzin · #2 (**permalink**) 25/12/2013, 15:26

Si usas posiciones absolutas sacas el elemento del flujo natural del HTML, por lo que no interactúa ni afecta a los demás elementos, y los demás elementos con ese tampoco. Así que si quieres que haga algo según otro elemento, quita la posición absoluta.

asdasd22 · #3 (**permalink**) 26/12/2013, 02:07

Cita:

Iniciado por pzin

Si usas posiciones absolutas sacas el elemento del flujo natural del HTML, por lo que no interactúa ni afecta a los demás elementos, y los demás elementos con ese tampoco. Así que si quieres que haga algo según otro elemento, quita la posición absoluta.

Y como hago que quede anclado al margen inferior sin posición absoluta?

pzin · #4 (**permalink**) 26/12/2013, 07:12

Dependerá del contexto.

¿Qué es para un pie de página que quieres que siempre quede abajo?

asdasd22 · #5 (**permalink**) 26/12/2013, 08:18

Cita:

Iniciado por pzin

¿Qué es para un pie de página que quieres que siempre quede abajo?

Así es.

pzin · #6 (**permalink**) 26/12/2013, 09:54

El problema real que tienes entonces es otro, que al parchearlo con posiciones absolutas te creó otro problema que, a priori, es imposible de solucionar mediante CSS.

Para lo del pie de página mejor usa un sticky footer: http://www.cssstickyfooter.com

asdasd22 · #7 (**permalink**) 27/12/2013, 03:41

Gracias amigo, podrías por favor moverlo a javascript a ver si me pueden dar una manito alli?

pzin · #8 (**permalink**) 27/12/2013, 07:09

No tiene que ver con JavaScript el tema, aquí en CSS está bien ubicado.

¿Probaste a usar sticky footer o simplemente te pareció complejo?

Porque la solución es esa, no andar haciendo historias con JavaScript.

asdasd22 · #9 (**permalink**) 27/12/2013, 12:04

Me pareció igual de chapuza.

horusorion · #10 (**permalink**) 27/12/2013, 12:35

lo uqe tienes que hacer es quitarle el margen de abajo a la capa verde y el de arriba a la azul... no la pongas en posicion absoluta porque la verde se metera debajo de la azul...

quedaria asi:

Código CSS:

Ver original#capaVerde 
          {
             bottom : 0;
          }
#capaAzul 
              {
                 top : 0;
                }

si no me equivoco deberia ser asi... porque yo estoy haciendo un proyecto y tengo que mostrar dos capas de esa forma y eso fue lo que hice...

horusorion · #11 (**permalink**) 27/12/2013, 12:41

tambien acuerdate que si es para un pie de pagina y si talvez tienes algunas capas en float tienes que ponerle un clear:both; para que no se eche a un lado ni el float que le hayas puesto le haga efecto a esa capa... espero haberte podido ayudar.. saludos

asdasd22 · #12 (**permalink**) 28/12/2013, 06:09

Cita:

Iniciado por horusorion

lo uqe tienes que hacer es quitarle el margen de abajo a la capa verde y el de arriba a la azul... no la pongas en posicion absoluta porque la verde se metera debajo de la azul...

quedaria asi:

Código CSS:

Ver original#capaVerde 
          {
             bottom : 0;
          }
#capaAzul 
              {
                 top : 0;
                }

si no me equivoco deberia ser asi... porque yo estoy haciendo un proyecto y tengo que mostrar dos capas de esa forma y eso fue lo que hice...

Gracias pero no funciona lo que propones, obviamente si posiciono relativamente las capas ya no se solapan, pero entonces el pie no queda anclado al margen inferior.