Lezione_7 - Proprietà Position.

static è il valore di default della proprietà position. Questo paragrafo è posizionato staticamente rispetto all'elemento div, di colore lime, a sua volta posizionato staticamene rispetto al suo più immediato ascendente che è l'elemento body.

Con il valore static gli elementi si dispongono secondo il flusso normale del documento: uno dietro l'altro occupando spazio in funzione della loro proprieta display - block o inline e del box model dell'elemento (ampiezza dell'area del contenuto, dei margini, dei bordi, e degli eventuali padding.)

Come prossimo elemento inserirò una immagine.

Questo dovrebbe esemplificare il principale limite del posizionamento statico: tutto lo spazio a destra dell'immagine risulta inutilizzato.

E le cose non migliorano molto anche inserendo l'immagine all'interno del paragrafo.

Ma una soluzione c'è. E' la proprietà float, "far galleggiare" un elemento nel suo contenitore. In questo caso l'immagine "galleggia" sulla sinistra del paragrafo che lo contiene. In questo modo, il testo del paragrafo circonda l'immagine flottante allo stesso modo con cui delle palline di plastica in una piscina circonderebbero una boa. Questa cosa è molto utile. In questo modo riesco a sfruttare a dovere lo spazio a destra dell'immagine. La proprietà appplicata all'immagine del ramarro qui visualizzato è float:left;.

La proprietà float può assumere i valori left o right.

La proprietà float può essere applicata anche ad elementi di tipo block come mostrerò nel paragrafo seguente dove farò galleggiare un paragrafo dentro una div:

Per interrompere il "galleggiamento" abbiamo a disposizione la property:clear che può assumere i valori:left; right; both; in questo paragrafo ho utilizzto clear:both;.

L'utilizzo di tutti questi colori può forviare il lettore sulle possibilità offerte dal posizionamento static. Per questo segue un esempio di posizonamento static con l'uso della property float non compromesso dall'uso pesante del colore.

Il posizionamento statico è adeguato per la costruzione della maggior parte dei documenti web a patto di saper utilizzare la proprietà float.

La property float non è ereditaria ma, una volta assegnata ad un elemento generico, permane fin tanto che non ce ne liberiamo con la property clear.

Padroneggiare la propery float con il posizionamento statico ci consente di trovare buone soluzioni di presentazione. Ma in certi casi non basta e dovremo ricorrere agli altri valori di position.

Non ho resistito alla tentazione di assegnare bordi e colori a qualche contenitore. L'ho fatto per evidenziare gli elementi flottanti.

Il mio consiglio è di studiare molto bene questa pagina, in quanto le soluzioni qui adottate sono applicabili ad un gran numero di situazioni. Il modo migliore per farlo è quello di scaricarne il codice ed esaminarlo attentamente. Proverò comunque a descriverlo a parole.

• Le proprietà di posizionamento riguardano il posizionamento degli oggetti (elementi HTML> all'interno del loro più immediato contenitore.
• Quasi tutti gli elementi di HTML possono contenere qualche altro elemento, ma personalmente, in applicazione di un principio di semplicità, scelgo di applicare le proprietà che hanno a che fare con il posizionamento all'elemento div, l'elemento principe fra quelli deputati al "contenimento". Questa è una mia scelta personale che, comunque, consiglio come primo approccio al problema.
• Esempio di posizionamento statico è confinato all'interno di una div anonima che ho reso visibile assegnandole un colore di background. Non avando assegnato alcun valore a position, questa si disporrà staticamente rispetto al suo immediato contenitore che è l'elemento body. La sua ampiezza (width) è ereditata dal body.
• Segue un elemento p, che occupa tutta la prima riga in quanto elemento di tipo block per il quale non ho specificato l'ampiezze, e che pertanto eredita dalla div che lo contiene.
• Il secondo elemento è ancora una div generica,sfondo giallo e bordi arancioni, posizionata staticamente, alla quale ho assegnato un ampiezza inferiore rispetto alla div che la contiene, inoltre l'ho dichiarata flottante a sinistra (float:left;). Questo fa si che essa si disporrà nella div contenitrice il più a sinistra possibile, spostando alla sua destra gli elementi che la seguono. E' come se in una vasca (la div più esterna) adagiassi una scatola galleggiante ancorata sul lato sinistro della vasca e poi inserissi altre vaschette (i paragrafi) nell'acqua.
• Dopo un altro paragrafo ho aggiunto un nuova div (quella con i valori della property clear), anche questa flottante a sinistra.
• Seguono due paragrafi che si dispongono a destra della seconda div flottante.
• Quindi nel paragrafo successivo ho cancellato la proprietà float assegnando ad esso la property clear:both; (ma sarebbe bastata la clear:left;).

Questo esempio è inserito negli esercizi della lezione. Potrete modificarlo a piacere per verificare l'effetto delle singole proprietà sull'aspetto del documento.

Ricordiamo che le proprietà di posizionamento di un elemento sono sempre riferite al suo contenitore.

La differenza principale fra un elemento con position:relative; rispetto ad un elemento statico è che l'elemento posizionato relativamente risponde alle properties top, right, bottom e left che consentono di assegnare un valore di offset rispetto alla posizione che l'elemento occuperebbe se fosse posizionato staticaminte. Mi spiego con un esempio: l'immagine che segue è posizionata relativamente. Nessun valore di offset è stato specificato. Essa occupa esattamente la stessa posizione che avrebbe occupato in caso di posizionamento statico.

Ripeterò il frammento di documento precedente applicando all'immagine appropriati valori di offset e riducendo l'ampiezza del paragrafo che la precede:

La differenza principale fra un elemento con position:relative; rispetto ad un elemento statico è che l'elemento posizionato relativamente risponde alle properties top, right, bottom e left che consentono di assegnare un valore di offset rispetto alla posizione che l'elemento occuperebbe se fosse posizionato staticaminte. Mi spiego con un esempio: l'immagine che segue è posizionata relativamente. Nessun valore di offset è stato specificato. Essa occupa esattamente la stessa posizione che avrebbe occupato in caso di posizionamento statico. I valori di offset applicati all'immagine sono: left:85%; top:-8em

Notate dove si posiziona questo paragrafo "statico". E' la posizione che avrebbe assunto se l'oggetto precedente fosse stato posizionato staticamente. Se volessi recuperare lo spazio "sprecato" dovrei posizionare questo paragrafo relativamente ed applicargli un appropriato valore di offset verticale. Questo dovrebbe immediatamente consigliarci ad usare il posizionamento relativo solo quando non troviamo altre soluzioni con il posizionamento statico, con i margini, i padding, e la proprietà float.

Come esempio, ho adottato il posizionamento fisso per l'intestazione di questa lezione.

Immagine fissa nel contenitore.

Come esempio, ho adottato il posizionamento sticky per la foto di questa lucertola. In realtà non si tratta di una lucertela ma di un ramarro, che è una lucertola un po più grande. Nello sviluppare questo esempio mi sono reso conto di non aver parlato della propietà di stile overflow.

Probabilmente non ho parlato di diverse altre propietà. La ragione, probabilmente, è che mi sto' concentrando sugli aspetti che è più difficile apprendere da soli. Anzi, per essere onesti, di quelli che sono stati più difficili da apprendere per me. E, per essere sinceri, ci sono ancora diversi aspetti del posizionamento che vorrei approfondire. Quali sono? Lo scoprirete, probabilmente, scaricando gli esercizi della lezione e modificando gli esempi.