Tengo estas dos pruebas que he hecho y no termino de entender.
Según he estudiado, aquí, la segunda caja se colocará en el ángulo superior izquierdo de la última línea de la caja relative. Y parece que se cumple ya que la caja hija no declara la position absolute.
Prueba 1
Código CSS:
Ver original<span style="border: 2px solid fuchsia; position:relative; background-color:yellow">
Caja padre con position relative no declarada.<br/>Segunda línea
<span style="position:absolute; background-color:brown">Caja hija position absolute no declarada.
</span >
</span >
Pero ¿qué ocurre si la position relative de la caja parent declara la position? No llego a captar cómo se sitúa el elemento hijo de ésta.
Prueba 2
Código CSS:
Ver original<br/><br/>
<span style="border: 2px solid fuchsia; position:relative; top: 2em; left: 2em; background-color:aqua">
Caja padre con position relative declarada.<br/>Segunda línea
<span style="position:absolute; background-color:olive">Caja hija position absolute no declarada.
</span >
</span >

Saludos y gracias de antemano.
Caminantejm