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.