Descripción extensa para la ilustración del posicionamiento absoluto con respecto al bloque de contención inicial

Este diagrama ilustra el efecto de posicionar absolutamente una caja con respecto al bloque de contención inicial.

Se muestra una ventana de documento, con 8 líneas (numeradas de 1 a 8), cada una de 24px del alto. Todo el texto del contenido y de "externo" fluye a través de las líneas 1, 2 y 3. La caja de "interno" ha sido posicionada en "-100, 200" con relación a las coordenadas "0, 0" (la esquina superior izquierda de la ventana del documento). La mayor parte del contenido de la caja de "interno" es por lo tanto procesado fuera de la ventana del documento.

En el siguiente ejemplo con un elemento PRE, cada línea de 24px es simulada por dos líneas, la segunda comienza con el número apropiado. El texto que está a la izquierda de los números de línea quedan afuera del bloque de contención inicial. Las líneas, tal como aparecen en la imagen, contienen aproximadamente:


    1 El comienzo del contenido. [@]Este

    2 es el tema externo. Fin del tema

    3 externo. El final del contenido.

    4

Tema  5

Intern 6 o.

    7        

    8        

El color de texto predeterminado es negro. "Este es el tema externo" es rojo. "o." de "tema interno" es azul. "Fin del tema externo" es rojo.

Volver a la imagen.