{"id":121,"date":"2010-11-29T22:11:19","date_gmt":"2010-11-29T21:11:19","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/fondamenti-del-posizionamento-in-css\/"},"modified":"2010-11-29T22:11:19","modified_gmt":"2010-11-29T21:11:19","slug":"fondamenti-del-posizionamento-in-css","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/fondamenti-del-posizionamento-in-css\/","title":{"rendered":"Fondamenti del posizionamento in CSS"},"content":{"rendered":"

Se siete un front-end developer o un designer a cui piace programmare, i layout basati su CSS sono il vostro pane quotidiano. In questo articolo, che per alcuni sar\u00e0 un semplice ripasso, mentre per altri potrebbe costituire il momento in cui tutto diventa chiaro, daremo un’occhiata alla propriet\u00e0 position<\/code> di CSS per vedere come la si possa usare per creare dei layout CSS senza tabelle e compatibili con gli standard web.<\/p>\n

\n

Il posizionamento \u00e8 tutto<\/h2>\n

Il posizionamento in CSS viene spesso frainteso: a volte, presi dalla furia del bug-fixing, si applicano diversi valori a position<\/code> per un dato selettore finch\u00e9 non si ottiene il funzionamento desiderato. Tale processo \u00e8 tedioso e pu\u00f2 andar bene per in un certo momento, ma \u00e8 obbligatorio sapere perch\u00e9<\/em> specificare qualcosa come position: relative<\/code> riesca a sistemare il bug presente nel layout. Spero che riusciate ad imparare i valori e i comportamenti della propriet\u00e0 position<\/code> e, cosa ancora pi\u00f9 importante, che effetto possa avere un dato valore sul vostro markup. La specifica CSS ci offre cinque propriet\u00e0 per position<\/code>: static<\/code>, relative<\/code>, absolute<\/code>, fixed<\/code> ed inherit<\/code>. Ciascuna di queste ha uno scopo specifico e comprenderli \u00e8 il segreto per padroneggiare i layout basati sui CSS.<\/p>\n

Seguire il flusso<\/h3>\n

Per prima cosa, facciamo un passo indietro per capire in che mondo ci stiamo muovendo. Pi\u00f9 o meno come nel mondo reale, in CSS si lavora all’interno di confini, che in questo caso prendono il nome di normal flow<\/a> [flusso normale, ndr<\/em>]. Stando alla specifica CSS 2.1:<\/p>\n

\n

I box nel flusso normale appartengono ad un contesto di formattazione, che pu\u00f2 essere block o inline, ma non entrambe simultaneamente. I box di tipo block prendono parte al contesto \u201cblock formatting\u201d. I box inline partecipano ad un contesto di formattazione inline.<\/p>\n<\/blockquote>\n

Pensate al \u201cbox\u201d descritto nella specifica come ad un cubetto di legno, simile a quelli con cui giocavate da piccoli. Ora, pensate al flusso normale<\/em> come ad una legge simile alla legge di gravit\u00e0. Il flusso normale del documento descrive come gli elementi si impilano uno sull’altro, dall’alto verso il basso, nell’ordine in cui appaiono nel markup. Magari vi ricordate di quando impilavate dei cubetti con le lettere dell’alfabeto in torri altissime: il normal flow non \u00e8 diverso da quei cubetti soggetti alla legge di gravit\u00e0. Da bambini mettevate un blocco sopra l’altro: nel vostro markup avete un elemento dopo l’altro. Quello che da bambini tuttavia non potevate fare era dare delle propriet\u00e0 a quei blocchi in modo tale che sconfiggessero la legge di gravit\u00e0. Ed ecco che all’improvviso, CSS sembra molto pi\u00f9 interessante dei cubetti con le lettere dell’alfabeto!<\/p>\n<\/div>\n

\n

Static e relative: niente di nuovo qui<\/h2>\n

Le propriet\u00e0 static<\/code> e relative<\/code> di position<\/code> si comportano come i blocchetti della vostra infanzia: si impilano come vi aspettereste che facciano. Si noti che static<\/code> \u00e8 il valore di default di position<\/code> per ogni elemento, nel caso vi dimentichiate di assegnargli un altro valore. Se avete tre elementi posizionati staticamente nel vostro codice, questi si posizioneranno uno sull’altro come vi aspettereste. Prendiamo un esempio con tre elementi, tutti con il valore di position<\/code> impostato a static<\/code>:<\/p>\n

 
#box_1 { 
position: static;
width: 200px;
height: 200px;
background: #ee3e64;
}
 
#box_2 { 
position: static;
width: 200px;
height: 200px;
background: #44accf;
}
 
#box_3 { 
position: static;
width: 200px;
height: 200px;
background: #b7d84b;
}
<\/code> 
<\/pre>\n
Nell’esempio A<\/a>, potete vedere tre elementi impilati come una semplice torre. Affascinante, vero? Avete appena assistito a \u201cFondamenti di costruzioni coi blocchi\u201d. Complimenti!<\/p>\n
Potete usare il valore static<\/code> per layout semplici, ad una colonna, nei quali ogni elemento sta sopra quello successivo. Se volete cominciare a spostare in giro quegli elementi usando le propriet\u00e0 offset come top<\/code>, right<\/code>, bottom<\/code> e left<\/code>, non avrete fortuna. Queste propriet\u00e0 non sono disponibili per un elemento static<\/code>. In effetti, un elemento static<\/code> non pu\u00f2 nemmeno creare un nuovo sistema di coordinate per gli elementi figlio. Un attimo. Cosa? Mi sono perso a sistema di coordinate<\/em>. Ricevuto! Spieghiamo come usare il valore relative<\/code>.<\/p>\n
Gli elementi posizionati in maniera relativa si comportano esattamente come quelli posizionati staticamente: giocano bene con gli altri, si impilano bene e non scatenano putiferi. Difficile da credersi, vero? Guardate l’esempio precedente. Questa volta applichiamo il valore relative<\/code>:<\/p>\n
 
 
#box_1 { 
position: relative;
width: 200px;
height: 200px;
background: #ee3e64;
}
 
#box_2 { 
position: relative;
width: 200px;
height: 200px;
background: #44accf;
}
 
#box_3 { 
position: relative;
width: 200px;
height: 200px;
background: #b7d84b;
}
<\/code> 
<\/pre>\n
L’esempio B<\/a> prova che gli elementi posizionati relativamente si comportano esattamente allo stesso modo di quelli posizionati staticamente. Quello che potreste non sapere \u00e8 che gli elementi con un valore di posizionamento relative<\/code> sono come Clark Kent<\/a>: nascondono poteri molto pi\u00f9 grandi rispetto ai loro fratelli statici.<\/p>\n
Per cominciare, possiamo sistemare gli elementi posizionati relativamente con le propriet\u00e0 offset: top<\/code>, right<\/code>, bottom<\/code> e left<\/code>. Usando il markup dell’esempio precedente, aggiungiamo una posizione offset a #box_2<\/code>:<\/p>\n
 
 
#box_2 { 
position: relative;
left: 200px;
width: 200px;
height: 200px;
background: #44accf;
}
<\/code> 
<\/pre>\n
L’esempio C<\/a> mostra tale posizionamento relativo in azione. I nostri tre blocchi si impilano correttamente, ma questa volta il blocco blu (#box_2<\/code>) \u00e8 spostato di 200 pixel a partire da sinistra. Qui \u00e8 dove cominciamo a piegare la legge di gravit\u00e0 alla nostra volont\u00e0. Il blocco blu \u00e8 ancora nel flusso del documento, gli elementi si impilano uno sull’altro ma notate il blocco verde (#box_3<\/code>) in fondo: sta sotto al blocco blu nonostante il blocco blu non sia direttamente sopra questo. Quando usate la propriet\u00e0 offset per spostare un elemento posizionato relativamente, questo non influisce sull’elemento o sugli elementi che seguono. Il blocco verde \u00e8 ancora posizionato come se il blocco blu fosse nella sua posizione non-offset. Provate a farlo con la torre di blocchi di legno dell’alfabeto!<\/p>\n
Creare un sistema di coordinate per gli elementi figlio \u00e8 un altro super-potere della propriet\u00e0 di posizionamento relativo. Un sistema di coordinate \u00e8 un punto di riferimento per le propriet\u00e0 offset. Ricordate come nell’esempio C<\/a> il nostro blocco blu (#box_2<\/code>) non si porta all’interno di alcun altro elemento, in questo modo il sistema di coordinate utilizzato per spostarsi di 200 pixel a sinista \u00e8 relativo al documento stesso. Se piazziamo l’elemento #box_2 <\/code> all’interno di#box_1<\/code>, otterremo un risultato differente, poich\u00e9 #box_2<\/code> si posizioner\u00e0 relativamente<\/em> al sistema di coordinate di #box_1<\/code>. Per il prossimo esempio, non cambier\u00f2 alcunch\u00e9 all’interno del CSS, modificheremo solo il nostro HTML per spostare #box_2<\/code> all’interno di #box_1<\/code>:<\/p>\n
 
 
<div id=\"box_1\">
   <div id=\"box_2\"><\/div>
<\/div>
<\/code> 
<\/pre>\n
L’esempio D<\/a> mostra il nostro nuovo markup. A causa del nuovo sistema di coordinate, il blocco blu misura il suo offset di 200 pixel dalla sinistra del blocco rosso (#box_1<\/code>) invece che dal documento. Questa pratica \u00e8 pi\u00f9 comune con gli elementi impostati a position: absolute<\/code>: il modo in cui avreste voluto costruire le vostre torri da bambini.<\/p>\n<\/div>\n
\n
Absolute: sempre e ovunque<\/h2>\n
Se il valore relative<\/code> si comporta come Superman<\/a>, allora il valore absolute<\/code> rispecchia Inception<\/a><\/cite>: un posto in cui create il vostro mondo. A differenza dei valori static<\/code> e relative<\/code>, un elemento posizionato assolutamente viene rimosso dal flusso normale. Significa che lo potete mettere ovunque e non influenzer\u00e0 n\u00e9 sar\u00e0 influenzato<\/em> da nessun altro elemento nel flusso. Pensatelo come un elemento con una gigantesca striscia di velcro sul retro: ditegli dove deve attaccarsi e si attaccher\u00e0. Esattamente come un valore relative<\/code>, gli elementi posizionati assolutamente rispondono alle propriet\u00e0 di offset per il posizionamento. Potete settare un elemento a top: 100px<\/code> e left: 200px;<\/code> e quell’elemento si piazzer\u00e0 esattamente a 100 pixel dal top e a 200 pixel dalla sinistra del documento. Prendiamo ora un esempio con quattro elementi:<\/p>\n
 
 
#box_1 { 
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: #ee3e64;
}
#box_2 { 
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background: #44accf;
}
#box_3 { 
position: absolute;
bottom: 0;
left: 0;
width: 200px;
height: 200px;
background: #b7d84b;
}
#box_4 { 
position: absolute;
bottom: 0;
right: 0;
width: 200px;
height: 200px;
background: #ebde52;
}
<\/code> 
<\/pre>\n
L’esempio E<\/a> mostra quattro blocchi, ciascuno in un angolo della finestra del browser. Dal momento che abbiamo impostato la position<\/code> di ciascun box al valore absolute<\/code>, abbiamo essenzialmente attaccato con il velcro ogni box ad un angolo della finestra del browser. Ridimensionando la finestra del browser, questi blocchi rimarranno nei rispettivi angoli. Se rimpicciolite la finestra del browser fino a che i blocchi si sovrappongono, noterete che non vi \u00e8 alcun tipo di interazione perch\u00e9 sono fuori dal flusso normale del documento.<\/p>\n
Proprio come gli elementi relative<\/code>, gli elementi absolute<\/code> creano un nuovo sistema di coordinate per gli elementi figlio. L’esempio F<\/a> estende l’esempio E<\/a>, con un elemento arancio messo in ciascun blocco. Notate come le coordinate di offset siano prese rispetto ad ogni elemento padre.<\/p>\n
Per non essere da meno rispetto ad altri valori della propriet\u00e0 position<\/code>, il valore absolute<\/code> offre alcune funzionalit\u00e0 davvero forti con le propriet\u00e0 di offset. Usate due delle quattro propriet\u00e0 di offset<\/code> e potrete allargare un elemento senza definirne una larghezza o un’altezza: sar\u00e0 vincolato solo dall’elemento padre o dal documento stesso. Vediamolo in azione. Considerate il codice seguente:<\/p>\n
 
 
#box_a { 
position: absolute; 
top: 10px;
right: 10px;
bottom: 10px;
left: 10px; 
background: red; 
}
#box_b { 
position: absolute; 
top: 20px;
right: 20px; 
bottom: 20px; 
left: 20px; 
background: white;
}
<\/code> 
<\/pre>\n
Nell’esempio G<\/a> abbiamo creato un border tramite offset di 10 pixel a partire dal documento ed \u00e8 interamente fluido al variare delle dimensioni del documento. Tutto fatto con il posizionamento assoluto e gli offset. In un altro esempio, possiamo creare un layout a due colonne che riempie l’intera altezza del documento. Ecco il CSS:<\/p>\n
 
 
#box_1 { 
position: absolute;
top: 0;
right: 20%; 
bottom: 0;
left: 0;
background: #ee3e64;
}
 
#box_2 { 
position: absolute; 
top: 0; 
right: 0; 
bottom: 0; 
left: 80%; 
background: #b7d84b;
}
<\/code> 
<\/pre>\n
Nell’esempio H2<\/a> concentriamoci sul blocco blu (#box_2<\/code>). Notate come uso solo un offset, left: 100px;<\/code>. Questo permette all’elemento #box_2<\/code> di mantenere il suo margine superiore e spostarsi ancora di 100 pixel da sinistra. Se applichiamo un secondo offset dall’alto, vedremmo il nostro blocco blu (#box_2<\/code>) tirato verso il top del documento. Potete vederlo qui, nell’esempio H3<\/a>:<\/p>\n
 
 
#box_2 { 
position: absolute;
top: 0;
left: 100px;
width: 200px;
height: 200px;
background: #44accf;
}
<\/code> 
<\/pre>\n<\/div>\n
\n
Fixed: sempre l\u00ec<\/h2>\n
Un elemento con position: fixed<\/code> condivide tutte le regole di un elemento posizionato in modo assoluto, ad eccezione della viewport (la finestra del browser o del device) che risulta essere il riferimento per l’elemento fixed<\/code>, a differenza di quanto avviene in qualunque elemento padre. Inoltre, un elemento fixed<\/code> non segue lo scrolling del documento, ma rimane…fisso. Guardiamo questo esempio:<\/p>\n
 
 
#box_2 {
position: fixed; 
bottom: 0; 
left: 0; 
right: 0; 
}
<\/code> 
<\/pre>\n
L’esempio I<\/a> mostra un footer con del testo di copyright come elemento fixed<\/code>. Mentre fate lo scroll della pagina, noterete che non si muove. Notate che le propriet\u00e0 di offset left<\/code> e right<\/code> sono impostate a zero. Dal momento che il valore di fixed<\/code> si comporta in maniera simile al valore absolute<\/code>, possiamo stirare la larghezza dell’elemento perch\u00e9 abbia la stessa dimensione della viewport mentre fissiamo l’elemento in fondo usando bottom: 0;<\/code>. Siate prudenti con l’utilizzo del valore fixed<\/code> di position<\/code>: il supporto nei browser pi\u00f9 vecchi \u00e8, nel migliore dei casi, irregolare. Ad esempio, le versioni pi\u00f9 vecchie di Internet Explorer rendono gli elementi fixed<\/code> come elementi static<\/code>. E adesso sapete che gli elementi static<\/code> non si comportano come gli elementi fixed<\/code>, giusto? Se pianificate di usare elementi fixed<\/code> in un layout, ci sono molte soluzioni<\/a> che fanno in modo che il vostro elemento si comporti in maniera corretta nei browser che non supportano il valore fixed<\/code>.<\/p>\n<\/div>\n
\n
Inherit: qualcosa per niente<\/h2>\n
Come ho detto all’inizio di questo articolo, ci sono cinque valori possibili per la propriet\u00e0 position<\/code>. Il quinto valore \u00e8 inherit<\/code>. Funziona come suggerisce il suo nome: l’elemento eredita il valore del suo elemento padre. Tipicamente, gli elementi con la propriet\u00e0 position<\/code> non ereditano naturalmente il valore del loro padre: il valore static<\/code> viene assegnato nel caso in cui non ci sia alcun valore per position<\/code>. Fondamentalmente, potete usare inherit<\/code> o il valore dell’elemento padre per ottenere il medesimo risultato.<\/p>\n
In azione<\/h3>\n
Tante chiacchiere e niente azione. Consideriamo un vero sito web che usa tutti i valori di position. L’esempio J<\/a> mostra un tipico layout di sito con un header, un menu di navigazione, del contenuto ed un footer. Passiamo in rassegna ciascun elemento e discutiamone la propriet\u00e0 position<\/code> e perch\u00e9 abbiamo scelto quella propriet\u00e0.<\/p>\n
Cominciamo dall’elemento #container<\/code>. Si tratta semplicemente dell’elemento che contiene tutto, che io uso per posizionare al centro il contenuto all’interno della viewport. L’elemento #nav<\/code> \u00e8 il primo elemento all’interno dell’elemento #container<\/code>. Nessuna propriet\u00e0 position<\/code> \u00e8 assegnata all’elemento #nav<\/code>, cos\u00ec di default \u00e8 impostata a static<\/code>. Va bene cos\u00ec: non abbiamo bisogno di fare nulla per spostare questo elemento o per creare un nuovo sistema di coordinate. Avremo bisogno di farlo con #content<\/code> nel nostro prossimo elemento, cos\u00ec che per quell’elemento avremo applicato una propriet\u00e0 position<\/code> impostata a relative<\/code>.<\/p>\n
Dal momento che non stiamo usando alcun offset qui, il valore di position<\/code> non ha davvero alcuna influenza sull’elemento #content<\/code>, ma lo abbiamo messo l\u00ec per creare un nuovo sistema di coordinate per l’elemento #callout<\/code>. Il nostro elemento #callout<\/code> \u00e8 impostato a position: absolute<\/code> e dal momento che \u00e8 l’elemento padre, #content<\/code> \u00e8 settato a relative<\/code>, le propriet\u00e0 di offset che stiamo usando su #callout<\/code> si basano sull’elemento padre che lo contiene. Inoltre, ho usato una delle feature pi\u00f9 cool del valore absolute<\/code> sul nostro elemento #callout<\/code>: impostando gli offset top e bottom a 100px ho stirato l’elemento #callout<\/code> all’altezza intera del documento meno 100px di offset al top e al bottom.<\/p>\n
Dal momento che l’elemento #callout<\/code> ha un valore absolute<\/code>, non influisce sugli altri elementi. Pertanto, abbiamo bisogno di aggiungere del padding all’elemento #content<\/code> per fare in modo che i paragrafi non scompaiano sotto a questo. Impostare il padding sulla destra di #content<\/code> a 250px fa rimanere il contenuto completamente visibile agli utenti. Per portare in primo piano ci\u00f2 che \u00e8 in secondo piano, abbiamo aggiunto un footer con una posizione fixed<\/code> per farlo restare fissato al bordo inferiore della pagina. Mentre facciamo lo scroll della pagina, il footer rimane al suo posto. Cos\u00ec come abbiamo aggiunto il padding al #content<\/code> per evitare che i paragrafi sparissero sotto ad esso, abbiamo bisogno di fare lo stesso per l’elemento #footer<\/code> perch\u00e9 \u00e8 un fratello del valore absolute<\/code>. Aggiungere 60px al padding-bottom dell’elemento #content<\/code> assicura che si possa far scorrere l’intero documento senza perdere alcuna riga di testo che sarebbe normalmente nascosto sotto l’elemento #footer<\/code>.<\/p>\n
Ora abbiamo un semplice e grazioso layout con navigazione, contenuto, un’area callout ed un footer che utilizza gli elementi static<\/code>,  relative<\/code>, absolute<\/code> e fixed<\/code>. Dal momento che stiamo usando il valore fixed<\/code> in questo layout, dovremmo applicare alcune tecniche<\/a> per assicurarsi che i vecchi browser rispettino comunque il nostro design.<\/p>\n<\/div>\n
\n
Conclusioni<\/h2>\n
Con il potere della propriet\u00e0 position<\/code> potete realizzare con successo molti layout. Grazie al cielo l’80% dei valori della propriet\u00e0 position<\/code> hanno un supporto eccellente sia nei nuovi che nei vecchi browser. C’\u00e8 per\u00f2 da stare attenti al valore fixed<\/code>. Comprendere il nocciolo di questi valori di property<\/code> vi d\u00e0 degli elementi fondamentali e solide basi per creare layout basati sui CSS, limitati solo dalla vostra fantasia. Si spera che adesso i giorni in cui tiravate ad indovinare i valori di position nella frenesia del bug fixing dell’ultimo minuto siano finiti.<\/p>\n
\u00a0<\/p>\n
Illustrazioni: {carlok}<\/p>\n<\/div>\n
Traduzioni:
 Coreano<\/a>
 Polacco<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Se siete un front-end developer o un designer a cui piace programmare, i layout basati sui CSS sono il fulcro del vostro lavoro. Il designer\/developer Noah Stokes esamina attentamente la propriet\u00e0 codeposition\/code di CSS per mostrarvi come pu\u00f2 essere usata per creare dei layout standard-compliant e senza tabelle mediante i CSS. Mettete alla prova la vostra conoscenza o ripassate il posizionamento statico, relativo, assoluto, fisso ed inherited e come funzionano quando usati insieme per creare qualsiasi layout web che la mente umana possa concepire.<\/p>\n","protected":false},"author":818,"featured_media":7000598,"comment_status":"open","ping_status":"open","template":"","categories":[244,247,272,33],"tags":[],"coauthors":[315],"class_list":["post-121","article","type-article","status-publish","has-post-thumbnail","hentry","category-css","category-html","category-layout-and-grids","category-numero-19-30-novembre-2010"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/121","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=121"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000598"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=121"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=121"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}