[SOLUCIONADO] Duda con position

[moscrates]

Hola buen dia.

Según he leido. el valor absolute en position hace referencia a los bordes de su padre
alguien puede decir entonces que.. esta pasando aqui



http://codepen.io/Moscrates/pen/XmpKOJ?editors=110

[michellqm]

Hola!

si mi memoria no me falla y espero que no, position: absolute; hara referencia al contenedor mas cercano siempre y cuando esté también posicionado relativamente

Lo que sucede en tu caso es que ninguno de tus otros contenedores tiene una posición relativa declarada y esto hace que sus propiedades "top" y "bottom" obedezcan directamente al viewport básicamente hacen caso omiso a que tienen un contenedor padre

lo que no sucede con las popiedades de margin, aunque el margin-bottom no lo llevará al final xD

Saludos

[AngelKrak]

amigo que ocupas exactamente? no le veo ningun problema y funciona bien todo tanto la position, como el Bottom

Un elemento absolutamente posicionado es un elemento en el que la propiedad de posición computed es absolute o fixed.

absolute
No deja espacio para el elemento. En su lugar, lo posiciona en unas coordenadas determinadas relativas a la posición más cercana de su elemento padre o del bloque contenedor inicial.

Para los elementos con position absolute , las propiedades top, right, bottom, y left especifican la separación desde los bordes del elemento bloque contenedor (aquel al que el elemento es relativamente posicionado). El margen del elemento es contado a partir de ese desplazamiento.

En la mayoría de los casos, los elementos con posición absolute tienen el valor auto en las propiedades height y width para albergar el contenido del elemento. Sin embargo, los elemento posicionados absolute pueden llegar a llenar el espacio disponible especificando (en lugar de auto) tanto top como bottom y dejando height sin especificar (esto es, auto). Igualmente para left, right, y width.

Mas Sobre Position:
https://developer.mozilla.org/es/docs/Web/CSS/position

[fede5426]

Los elementos con posición absoluta, fija o relativa toman como referencia los bordes de su elemento antecesor mas cercano que también posea posición absoluta, fija o relativa. De no tenerlo, toman como referencia los bordes del documento.

Si a tu elemento con clase "quienes" le agregas "position:relative;".. el div "qesBox1" se va a posicionar donde querés.

Saludos

[pzin]

Iniciado por fede5426

De no tenerlo, toman como referencia los bordes del documento.

En realidad de no tenerlo toma como referencia el viewport.

[moscrates]

Eso es justo lo que estaba pasando, le puse relative al section y quedo de maravilla.
Gracias a todos