MoebiusMania
Tutorial, articoli e curiosità sul web e dintorni
CSS tip #6 - Assoluto nel relativo
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:
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.
#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.