Diferencia entre posiciones de un div

[joakinMAX]

Que tal, no se si busque bien en el foro antes de hacer esta pregunta pero no encontre una respuesta.
Quiero saber cual es la diferencia entre las diferentes posiciones que puede tener un div: absolute, relative, fixed, inherit y static; como funciona cada una y si se aplican igual para otros objetos.
Gracias por su ayuda!

[ugmaster]

Ya somos dos joakinMAX..

Yo solo se que cuando le colocas "absolute", la posicion es con repecto a la ventana activa, no importando que esta ultima se encuentre inmersa en otro div.
Que la "relative", es cuando se pocision con respecto al objeto contenedos del div.

Pero de las demas ni idea..

[Mikmoro]

No, no es así. La posición absoluta funciona con respecto a la ventana o con respecto a su caja contenedora si ésta tiene a su vez posición absoluta o relativa.
La posición relativa funciona con respecto a su propia posición, es decir, que los deplazamientos son referentes a la posición que ocupa en el flujo del documento.

De todas maneras, en este enlace tenéis en el punto 9 todo referente a las cajas y sus posiciones:

http://www.sidar.org/recur/desdi/tra...css/cover.html

[joakinMAX]

Gracias por sus respuestas! Aqui pongo una parte de la página que me recomendó mikmoro para los que quieran verlo rapidamente:

Las propiedades 'position' y 'float' determinan qué algoritmo de posicionamiento CSS2 se usa para calcular la posición de una caja.

'position'
Valor: static | relative | absolute | fixed | inherit
Inicial: static
Se aplica a: todos los elementos, pero no al contenido generado
Se hereda: no
Porcentajes: N/A
Medios: visuales

Los valores de esta propiedad tiene los siguientes significados:

static
La caja es una caja normal, situada de acuerdo al flujo normal. Las propiedades 'top', 'right', 'bottom' y 'left' no se aplican.
relative
La posición de la caja se calcula de acuerdo al flujo normal (ésta se llama la posición en el flujo normal). Luego la caja se desplaza de modo relativo a su posición normal. Cuando una caja B es posicionada relativamente, la posición de la caja siguiente se calcula como si B no se hubiera desplazado.
absolute
La posición de la caja (y posiblemente el tamaño) se especifica con las propiedades 'left', 'right', 'top', y 'bottom'. Estas propiedades especifican los desplazamientos con respecto al bloque de contención de la caja. Las cajas posicionadas absolutamente son quitadas del flujo normal. Esto significa que ellas no tienen ningún impacto sobre la composición de los hermanos siguientes. También, aunque las cajas posicionadas absolutamente tiene márgenes, no se cierran con ningún otro margen.
fixed
La posición de la caja se calcula de acuerdo al modelo 'absolute', pero además, la caja se fija con respecto a alguna referencia. En el caso de los medios contínuos, la caja se fija con respecto al acceso visual (y no se mueve cuando se realiza un desplazamiento). En el caso de los medios paginados, la caja se fija con respecto a la página, aún cuando esa página se vea a través de un acceso visual (en el caso de la previsualización de un impreso, por ejemplo). Los autores pueden preferir especificar 'fixed' de un modo dependiente de los medios. Por ejemplo, un autor puede desear que una caja permanezca en la parte superior del acceso visual en la pantalla, pero no al comienzo de cada página impresa. Las dos especificaciones pueden ser separadas utilizando una regla @media, como en:
Ejemplo(s):


@media screen {
H1#first { position: fixed }
}
@media print {
H1#first { position: static }
}

Si alguien me lo pudiera explicar con otras palabras o con ejemplos se lo agradecería mucho!

[nodream]

Tengo ya rato haciendo cosas con css, aplicando un poco de lo que he aprendido en una pagina y en otra y en otra, y por lo que yo he deducido, pero mi poder deductivo no es tan grande despues de todo, hoy me pregunte cual era la diferencia entre las distintas posiciones y entonces di con este link, el cual al principio me dio gusto encontrar justo la info que necesitaba, pero al terminar de leer quedé mas confundido aún. Así que me uno a la mocion de joakinMAX. Alguien sabe de algun manual mas practico y con ejemplos?

[ganimedes1]

no es necesario un manual para entenderlo, en esta web lo explican de una manera sencilla, práctica y con ejemplos.

http://www.barelyfitz.com/screencast/html-training/css/positioning/

lo único es que está en inglés.

Saludos,

[Mikmoro]

Pues mira, hace tiempo que estaba escribiendo una pequeña guía de migración de las tablas a XHTML+CSS, y eso precisamente era una parte de ella.

La tenía un poco parada y este mensaje me ha animado a terminar este capítulo.

http://www.araudi.net/forosdelweb/posiciones.html

Échale un vistazo a ver si se entiende todo bien y de paso me haces de beta-tester

Ya me dirás.

[joakinMAX]

Iniciado por ganimedes1

no es necesario un manual para entenderlo, en esta web lo explican de una manera sencilla, práctica y con ejemplos.

http://www.barelyfitz.com/screencast...s/positioning/

lo único es que está en inglés.

Saludos,

Gracias Ganimedes! muy buena información!

Iniciado por Mikmoro

Pues mira, hace tiempo que estaba escribiendo una pequeña guía de migración de las tablas a XHTML+CSS, y eso precisamente era una parte de ella.

La tenía un poco parada y este mensaje me ha animado a terminar este capítulo.

http://www.araudi.net/forosdelweb/posiciones.html

Échale un vistazo a ver si se entiende todo bien y de paso me haces de beta-tester

Ya me dirás.

Hola Mikmoro! perdón por la tardanza pero no había tenido oportunidad de checar. Eres muy amable al tomarte la molestia de hacer estas guías y claro que me sirvió, con la información que me han dado ganimedes y tu ya tengo un poco mas claro el uso de estas propiedades. Gracias!

[trhipahx]

Respecto a este tema que se trata aquí estoy leyendo un manual en http://www.ignside.net/man/css/posicionamiento.php y resultas que pruebo los ejemplos en Firefox y en IE no coinciden.
Mi pregunta es ¿de qué sirve comprender todo esto si cada explorador lo interpreta diferente?
No hay algo que sirva para todos.
Mi problema surge en los ejemplos en los que el elemento parent es texto y se posiciona relativamente y el elemento hijo tambien es texto, se posiciona absolutamente pero con solo una de las propiedad (top o left)
Si ponemos las dos propiedades sí que funciona igual en los dos navegadores.


Cuatro ejemplos con elemento parent texto:

elemento posicionado relativamente sin valores top ni left:

<SPAN STYLE="position:relative; background-color:#90EE90">
relative green parent relative green parent
green parent relative green parent relative
<SPAN STYLE="position:absolute; background-color:#ADD8E6">Absolute
blue child sin top ni left
</SPAN>
</SPAN>

¿quieres verlo?

En este ejemplo, al no venir determinadas las propiedades left y top, el origen de nuestro elemento absoluto (azul) es al final del elemento parent (verde). Sin embargo, como el elemento parent fluye cuando cambia la ventana del navegador, el origen del elemento absoluto puede ser variable.
elemento posicionado con valores top y left.

<SPAN STYLE="position:relative; background-color:#90EE90">
relative green parent relative elative
green parent relative green parent relative green parent
<SPAN STYLE="position:absolute; top:10px; left:50px;background-color:#ADD8E6">
Absolute blue child con top:10px y left:50px.
</SPAN>
</SPAN>

¿quieres verlo?

En este ejemplo sí determinamos las propiedades top y left de nuestro elemento absoluto. Por eso su origen no se moverá, aunque redimensionemos la ventana.

Elemento posicionado absolutamente, fijado unicamente un valor top

<SPAN STYLE="position:relative;background-color:#90EE90">
relative green parent relative green parent
relative green parent relative
<SPAN STYLE="position:absolute; top:10px;background-color:#ADD8E6">
Absolute blue child con top:10px.
</SPAN>
</SPAN>

¿quieres verlo?

En este ejemplo solo determinamos la propiedad top. Esto significa que el valor top del origen nunca variará, el elemento azul siempre comenzará 10 pixels desde la parte superior de su (no static) parent. Pero el valor left es auto, por lo que se refiere al final del elemento parent. Por eso si se estrecha la ventana del navegador, la parte izquierda del rectangulo de nuestro elemento absoluto se moverá.

Elemento posicionado absolutamente, fijado unicamente su valor left

<SPAN STYLE="position:relative;background-color:#90EE90">
relative green parent relative green parent
relative green parent relative green parent relative
green parent relative green parent relative green parent
<SPAN STYLE="position:absolute; left:50px;background-color:#ADD8E6">
Absolute blue child con left:50px.
</SPAN>
</SPAN>

¿quieres verlo?

Al contrario que en el ejemplo anterior, el lado izquierdo del elemento permanecerá fijo a 50 pixels, mientras que la parte superior variará dependiendo de la situación del final del elemento parent.

[Mikmoro]

Iniciado por trhipahx

Mi problema surge en los ejemplos en los que el elemento parent es texto y se posiciona relativamente y el elemento hijo tambien es texto, se posiciona absolutamente pero con solo una de las propiedad (top o left)
Si ponemos las dos propiedades sí que funciona igual en los dos navegadores.

Esto es un problema ya conocido (otro más) de IE6: si no pones una de las coordenadas, el la interpreta por defecto, poniéndola aproximadamente a un 50%. Esto es así y no hay mucho que hacer, más que definirlas siempre aunque sea a cero al menos dos coordenadas. No es problema de las posicioines, sino de un navegador concreto (el de siempre).

[trhipahx]

Gracias.
Estoy empezando a aprender y estas cosas me agobian.
Pero sabiendo que al poner las dos coordenadoas esto se soluciona me quedo más tranquilo.