Il testo che sto scrivendo, ad esempio, ha una propria posizione (le sue coordinate dai bordi dello schermo, dette anche x e y) e una propria dimensione (spazio occupato in larghezza e altezza).
Ma come vengono impostate dal browser che legge il codice HTML e, soprattutto, come è possibile impostare da codice le coordinate precise per visualizzare i contenitori sullo schermo?
Per cominciare, ogni tag ha una propria posizione e le varie posizioni sono assegnate automaticamente dal browser in base alle indicazioni dei tag che lo precedono.
Facciamo un esempio :
Testo di Prova
Avrà una certa posizione sullo schermo che non sarà la stessa di
Testo di Prova
poichè il tag ‘br’ che lo precede tende a spostarlo di una riga più in basso.
Ma se volessimo posizionare questo testo esattamente a 50 pixel dal bordo superiore della pagina e a 30 pixel dal bordo sinistro? Essendo il browser ad decidere le posizioni per noi dobbiamo farlo utilizzando il CSS per intervenire con precisione sulle coordinate degli elementi. Vediamo come.
p style="top: 50px; left:30px; position: absolute;">Testo di Prova
[adsense]
Analizziamo questo codice:
style: introduce un codice CSS che interessa, però, solo l’elemento in cui è presente (in tal caso il tag ‘p’ in quanto è scritto in quel tag)
left, top, right,bottom: indicano le coordinate rispettivamente dal bordo sinistro del browser (left), quello superiore (top), quello destro (right) e quello inferiore (bottom). Attenzione perchè tali valori vengono interpretati diversamente in relazione al valore della proprietà position;
position: è la proprietà, appunto, che specifica il modo in cui viene posizionato il conenitore; valori previsti sono :
- absolute: posizionamento assoluto ovvero i valori inseriti come coordinate saranno gli stessi che il contenitore avrà sullo schermo.
- relative: le coordinate specificate identificano lo spostamento dalla coordinata impostata. Contrariamente alla posizione assoluta, le declarazione top, bottom, left e right non rappresentano punti fissi di posizionamento ma sono basate sulla posizione naturale dell’elemento. Esempio : se il browser dovesse assegnare come coordinata dal bordo sinistro il valore di 30px, la scrittura di “left:20px” farà si che la posizione dal bordo sinistro sia la somma delle 2 coordinate: 30px(assegnati dal browser)+20px(assegnati dal programmatore) = 50px ( posizione che avrà realmente il contenitore); si possono anche impostare valori negativi come “left: -20px”; in questo caso la posizione reale dal bordo sinistro sarà di: 30px-20px = 10px ). La principale differenza tra absolute e relative sta nel fatto in absolute le coordinate inserite rappresentano le coordinate vere, mentre nel relative indicano di quanto si sposta l’elemento dalla posizione assegnatogli dal browser
- static: Tale valore tiene conto solo della posizione impostata dal browser, ignorando totalmente le coordinate inserite sul codice dal programmatore (anche se scriviamo left: 50px ecc..)
- fixed : Come per la posizione assoluta, il valore fixed (fisso) permette di rimuovere l’elemento del flusso normale della pagina per potere posizionarlo con le declarazione top, bottom, left e right. La differenza tra di loro è che l’elemento fisso si posiziona sempre in base a l’elemento HTML (l’area visiva della finestra del browser) in alto a sinistra e mai ad un suo eventuale elemento ‘contenitore’. Essendo fisso, questo elemento rimanerà sempre alla sua posizione anche se il resto della pagina è scorrevole. Un elemento ‘fixed’ può essere riposizionato usando top, bottom, left, right (come per ‘absolute’) ricordandosi che sarà sempre in relazione alla finestra browser. NB: NON SUPPORTATO DA INTERNET EXPLORER 6 E INFERIORE.
