CSS tip #6 – Assoluto nel relativo
Scritto da Salvo il 31 marzo 2009 con 6 commenti
Dal titolo può sembrare una notevole contraddizione, ma in ambito di CSS è una tecnica molto utile che tra le altre cose chiarisce alcuni dubbi che si hanno i primi tempi riguardo le proprietà di posizione (absolute , relative).
In precedenza avevo accennato al discorso di come posizionare oggetti in modo fisso alla pagina, l’unico problema di quella nozione era che non vi permetteva di posizionare gli oggetti all’interno di blocchi <div>, questo perche il posizionamento assoluto nei Css al momento della visualizzazione “rimuove” l’oggetto con la suddetta proprietà dalla struttura Html (ripeto è una rimozione che avviene solo a livello visivo, il vostro codice rimane inalterato!) e lo posizione liberamente alle coordinate specificate della pagina.
Ma tutto questo accade solo se l’oggetto con proprietà “position: absolute;” si trova all’interno di un oggetto con proprietà “position: static;” , che è il valore di default per il parametro “position” che viene attribuito ad ogni oggetto.
Per fare in modo che un oggetto con posizionamento assoluto venga posizionato relativamente all’interno di un blocco <div> dovremo attribuire all’oggeto “parente” (ovvero quello che nel codice Html è superiore all’oggetto interessato) il parametro di “position: relative;”.
Passiamo a un paio di esempi pratici per rendere meglio l’idea, ipotizziamo di avere due oggetti: “div1″ e “div2″ (notare la fantasia dei nomi) e di applicargli le seguenti regole Css:
#div1 {
position: relative;
margin-top: 20px;
background-color: #fff;
}
#div2 {
position: absolute;
width: 50px;
height: 50px;
background-color: #900;
top: 0;
right: 0;
}
Il primo concetto chiave da capire è che il posizionamento assoluto va dato all’oggeto da posizionare, mentre quello relativo va dato all’oggetto che conterrà quello da posizionare.
Il secondo concetto chiave riguarda l’ordine Html dei due oggetti, se scriviamo semplicemente <div id=”div1″></div> seguito da <div id=”div2″></div> otterremo quello che gia conoscevamo dal CSS tip #2, ovvero che il div2 con posizionamento assoluto andrà a posizionare all’angolo in’altro a destra della pagina, mentre se scriviamo il div2 contenuto all’interno del div1 (<div id=”div1″><div id=”div2″></div></div>) otterremo il nostro risultato, avere il div2 posizionato all’interno del div1 (come nell’immagine sopra).
Ricordo che potete scaricare il file di referenza per i CSS Tips.
Nota:
Per precedenti nozioni riguardo Z-Index e posizione assoluta date un’occhio al CSS tip #2.
Articoli correlati:
- CSS Tip #11 – Le immagini di sfondo Dal titolo può sembrare un argomento ovvio o scontato, tuttavia il saper padroneggiare le proprietà che regolano le immagini di sfondo in CSS è ciò che ci permette di realizzare [...]...
- CSS Tip #9 – Css di Natale! In quest’edizione “speciale” dei Css tips, dedico qualche minuto a spiegare come ho scritto i Css per il “Christmas Pack 2009″. Come vedrete, molte delle proprietà che uso per inserire [...]...
- CSS tip #2 – Posizione, Z-Index e PNG Sono 3 piccoli argomenti strettamente connessi per ottenere un’effetto interessante: fissare immagini in layout su vari “livelli“. Per intenderci, ricreare l’effetto della banda “Too Cool for IE” che vedete su [...]...
Riguardo Salvo...
Web designer/developer (aka Interactive Designer) dal 2006, ho lavorato in varie aziende che operano dall'e-commerce alla comunicazione multimediale, sono stato speaker a conferenze come Better Software, Codemotion e due WordCamp. Dal 2010 insegno linguaggi web alla scuola Mohole di Milano.
Se ti e' sembrato utile perche' non mi offri un caffe'?
Tutto quello che trovi su MoebiusMania.net puo' essere utilizzato liberamente e gratuitamente, se magari hai trovato qualcosa di particolarmente utile puoi mostrare il tuo apprezzamento con una minuscola donazione con Paypal o cliccando sui banner!
ciao stefano, non sei assolutamente scemo!
la questione funziona esattamente come dici tu, quando applichi la proprietà di posizionamente assoluto ad un’oggetto in fase di rendering del browser esso viene “rimosso” dalla struttura del codice, quindi per il div relativo che lo contiene è come se non esistesse, di conseguenza non si espande per contenerlo perche… non c’è 
non ho affrontato questa situazione nel tip perche in genere si tende a mettere oggetti piccoli dentro oggetti grandi… naturalmente nessuna casistica è assoluta e anche la tua va presa in cosiderazione, se hai l’esigenza che il div relativo si allunghi in base a quello assoluto puoi fare due cose:
1. se l’altezza del div assoluto è fissa, puoi semplicemente impostare l’altezza del div relativo per fare in modo che sia maggiore a quella del primo
2. se l’altezza del div assoluto è variabile (per via di contenuti dinamici per esempio), puoi aiutarti con un paio di righe di Javascript (magari jQuery che è un po + spiccio in questo caso 
) e fare uno scriptino che al caricamento della pagina “legga” l’altezza del div assoluto e reimposti l’altezza di quello relativo per contenerlo (magari la stessa con qualche pixel in +).
se hai dubbi o se ho scritto in modo incomprensibile fammelo sapere senza problemi
ciao
Stefano scrive: Grazie x la gentile risposta….è un sollievo sapere di non esser tanto scemo , quindi anche qui si ripete il problema di un div contenitore rispetto a div interni ad esso che “flottano” tra di loro. Anche se mi sembra che in quei casi “overflow:auto” risolve la cosa…(infatti l’ho provato anche nel tuo esempio….ma niente 
….).
Sapresti indicarmi dove reperire lo script che suggerivi. (uso gli script ma non so scriverli)
Grazie ancora e Auguri di buona Pasqua
mmmm nel caso dei div che flottano, se ho inteso bene la situazione, c’è anche un’altro trucchettino per risolvere la cosa
non so dove dirti di prendere uno script cosi, ma visto che non è difficile da fare e la questione da te sollevata è interessante come argomento, pazienta fino a domani che pubblico un mini tutorial dove spiego come farlo (tranquillo sono proprio due righe di codice, se vuoi prepararti inizia a guardare il mio tutorial su come iniziare con jQuery o se hai un minimo di dimistichezza con jQuery allora tantomeglio!)
ciao e buona pasqua anche a te!
Ciao, interessante il tuo esempio, ma a me qualcosa non funziona….mi sento scemo
.
Il div assoluto se ha un’altezza o un contenuto superiore a quello relativo, esce in verticale, e quindi sembra che il div relativo non si espande per contenere il “suo” div assoluto.
E’ giusto così o è colpa mia?
Grazie
Ciao