In HTML / CSS ti stai riferendo a un modello di visualizzazione relazionale
Dove gli elementi sono posizionati in base alla loro relazione con gli elementi che si trovano prima / dopo di loro nell'albero.
L'alternativa è un modello di posizionamento assoluto in cui la struttura non ha importanza e la posizione di ogni elemento è esplicitamente posizionata rispetto all'angolo in alto a sinistra.
Generalmente è preferibile la relazione perché consente di apportare modifiche a parti dell'intero senza richiedere un completo ricalcolo di tutti gli offset all'interno della pagina.
Ad esempio, se si modifica l'offset per un pannello di 5 generazioni / nodi rimossi dal pannello principale; in una modalità relazionale, tutto ri-fluisce per compensare automaticamente; in un modello assoluto, l'offset per tutte le 5 generazioni / nodi di pannelli parent deve essere ricalcolato in ordine decrescente perché nessun bambino può calcolarne l'offset in relazione al genitore fino a quando il genitore non viene aggiornato per primo.
La parte difficile dei modelli di layout HTML / CSS è che puoi combinarli.
Per esempio, un quinto riquadro figlio può essere posizionato usando il posizionamento relativo (display: relativo) ma gli elementi figli di quel nodo possono essere posizionati usando il posizionamento assoluto (display: assoluto) all'interno di quell'elemento. Vale a dire invece di calcolare l'offset in alto a sinistra dall'angolo della finestra, viene preso in relazione all'angolo superiore sinistro della finestra in cui risiede (5 generazioni di profondità).
La forza del modello di posizionamento relativo è che nessun bambino deve essere consapevole del posizionamento del suo genitore. Gli elementi secondari possono essere beatamente inconsapevoli. La difficoltà arriva quando ci sono problemi / incongruenze (cioè come è accaduto molto con incoerenze del browser in passato). Dovrai quindi eseguire di nuovo il backup dell'albero un elemento alla volta fino a quando non potrai determinare quello che causa il problema.
Fortunatamente, con strumenti come FireBug e Strumenti per sviluppatori di Google Chrome, è davvero facile eseguire la scansione attraverso l'albero e visualizzare le caselle di layout, i margini di riempimento, i margini e così via interagire tra loro.
Sfortunatamente, una volta adottato un modello relazionale diventa davvero difficile progettare un tipico strumento di costruzione GUI drag-drop in modo che la maggior parte dello sviluppo della GUI relazionale avvenga solo nel codice. Forse cambierà nel prossimo / lontano futuro.
Nota: per completezza, sento che dovrei menzionare anche il modello di posizionamento fisso. È fondamentalmente lo stesso del posizionamento assoluto ma non è influenzato dallo scorrimento. È così che quelle fastidiose barre degli strumenti che si attaccano alla parte inferiore / laterale della pagina vengono create sulla maggior parte dei siti web.