Descrizione lunga per esempio che illustra il posizionamento rispetto ad un antenato posizionato

Questo diagramma illustra gli effetti del posizionamento assoluto di un riquadrato ("inner") rispetto ad un blocco contenitore stabilito da un antenato posizionato in modo relativo ("outer").

Viene mostrata la finestra di un documento, con 8 righe (numerate da 1 a 8), ciascuna alta 24px. Tutto il testo del corpo e di "outer" sono stati fatti fluire in righe e nelle righe 1, 2, e 3. Il riquadrato "inner" è stato posizionato in modo relativo ai limiti superiore e sinistro del primo riquadrato in riga dell'elemento "outer".

Nel seguente elemento PRE, ogni riga di 24 pixel viene simulata da due righe, la seconda che comincia con il numero appropriato. I limiti di riferimento per posizionare il riquadrato "inner" sono indicati nel diagramma con spesse linee tratteggiate. Le coordinate superiori sinistre del riquadrato "inner" sono etichettate con (+200, -100). Nell'elemento PRE di sotto, i limiti di riferimento per "inner" sono indicati da barre verticali e segni di uguale. Lo spostamento del riquadrato "inner" è dato in parentesi quadre. Le righe di testo, come appaiono nell'immagine, contengono approssimatamente:

                        ====
                             |
1 Beginning of body contents.|Start

2 of outer contents. End of outer

3 contents. End of body contents.

4          [(+200, -100)]

5                Inner

6                contents.

7                

8                

Il colore predefinito del testo è nero. "Start of outer contents" rosso. "Inner contents" blu. "End of outer contents" rosso.

Ritorna all'immagine.