Duda en posicionamiento absoluto
4 seguidores
Como bien me recomendó estos días el Sr Orange me he puesto a afianzar ideas y conceptos en cuanto al posicionamiento con css, pero hay ciertas cosas que no acabo de entender:
Un bloque con position: absolute y con height 100% si lleva otro bloque dentro que sobrepasa sus supuestos limites, ¿por qué no crece?, me refiero, ¿qué significa esa altura del 100% en un bloque con position: absolute?
txuma Plus
zigotica
no, me referia al eje de coordenadas, el padre debe tener un position para poder usar su eje.
Efectivamente, así es.
demssite
orange
A leer coño: "Cascading Style Sheets" Owen Briggs y otros (creo que el Champeon y demás). Anaya
Aquí lo tengo delante, leido y releido, pero son cosas que me surgen al ponerme con la práctica. Lo leeré one more time.
***************
Steven Champeon
Eric Costello
Owen Briggs
Matt Patterson
***************
Jejejeje
Gracias chicos
Un Saludo.
Diego
zigotica
no, me referia al eje de coordenadas, el padre debe tener un position para poder usar su eje. lo que pasa es que tu te explicas mejor, que pa eso eres profe :)
orange
demssite
Si tengo un contenedor principal con position:absolute y le doy una altura del 100% creo que pilla la altura del visor del browser (el body supongo).
No, hace falta añadirle un par de cosas más, porque no has tenido en cuenta un par de elementos importantes en este caso
<code>html, body {
height: 100%;
min-height: 100%;
}
#contenedor {
min-height: 100%;
}</code>
demssite
Si no le pongo height y dentro de este bloque posicionado absolutamente le meto un bloque con position relative que supere el supuesto límite del contenedor padre (el posicionado absolutamente), este crecerá y se adaptará al tamaño del hijo, siempre y cuando no le especifique un top al hijo, cosa que el padre no tiene en cuenta.
¿Creo que es así no?
SÍ, si no le defines un width o height al elemento crecerá con lo que tenga dentro. Las interacciones entre posicionamientos pueden variar este resultado
zigotica
que me corrija orange que hace tiempo q no pico:
un elemento tendrá posición si su padre la tiene. en el caso del elemento con position:absolute, este sale del flujo de la página y su posición dependerá del top/left.
No te acabo de pillar, las posiciones no se heredan, ¿?
Teoría pura y dura, tal como la canto en mis cursos...
Un elemento con posición absoluta se saca del flujo de la página, el resto de elementos se comportan como si no existiera y se posiciona según un eje de coordenadas. Dicho eje de coordenadas tiene origen en el primer padre que encuentra con posición a su vez absoluta o relativa. Por defecto, y si no se ha redefinido ningún posicionamiento en otro elemento, el primer padre que encontrará será el BODY (que por defecto tiene posicion absoluta).
Un elemento con posición relativa se saca del flujo de la página visualmente, el resto de elementos se comportan como si dicho elemento estuviera en su posición original; y se sitúa según un eje de coordenadas que tiene como referencia su propia posición original.
Ea!
Y después de la teoría viene un ejercicio práctico donde mis pobres pupilos tratan de desenmarañar el caos que les acabo de meter en el cerebro.
A leer coño: "Cascading Style Sheets" Owen Briggs y otros (creo que el Champeon y demás). Anaya
demssite
Mmmmm eso si Sergi, si un absolute le pones top y left creo que lo pilla o del body sino está en ningún contenedor posicionado, es decir si esta dentro de un absolute o un relative pillaría ese como referencia 0 (creo)
zigotica
que me corrija orange que hace tiempo q no pico:
un elemento tendrá posición si su padre la tiene. en el caso del elemento con position:absolute, este sale del flujo de la página y su posición dependerá del top/left.
demssite
Pongo un ejemplo, pero creo que estoy llegando a una conclusión:
Si tengo un contenedor principal con position:absolute y le doy una altura del 100% creo que pilla la altura del visor del browser (el body supongo).
Si no le pongo height y dentro de este bloque posicionado absolutamente le meto un bloque con position relative que supere el supuesto límite del contenedor padre (el posicionado absolutamente), este crecerá y se adaptará al tamaño del hijo, siempre y cuando no le especifique un top al hijo, cosa que el padre no tiene en cuenta.
¿Creo que es así no?
Espero haberme explicado y linko ejemplo:
Ejemplo de posicionamiento
demssite
A ver la cosa es que si de height pones el 100%, ese 100% qué es lo que realmente significa?
orange
Si le defines width o height al contenedor (esté en absolute o como sea) dicho contenedor no crecerá jamás, y el contenido desbordará. Atendiendo a lo que hayas definido en la propiedad overflow para dicho contenedor.
Explorer 6 tiene un BUG asociado a esta propiedad y hace crecer el contenedor. Esto está MAL y es fruto de muchísimos fallos cuando se programa CSS tomando como referencia Explorer.
Si NO le defines width o height al contenedor éste crecerá con el contenido, siempre que el propio contenido no esté a su vez posicionado de forma absoluta. En cuyo caso lo sacas del flujo y para el contenedor es como si no tuviera nada dentro.
De todas formas yo creo que he probado eso y el comportamiento no es consistente multinavegador.
Cuelga un ejemplo ligero con lo que te pasa y te podremos ayudar más.