Puoi determinare il tipo di posizionamento per un'area o un elemento. Per farlo si utilizza la proprietà position. Questa proprietà indica come un elemento deve essere posizionato alla fine. In totale ci sono quattro diverse varianti di posizionamento disponibili.
• static - nessun posizionamento speciale viene effettuato e si verifica un normale flusso del testo.
• relative - avviene un posizionamento relativo, che si basa sulla posizione normale o iniziale dell'elemento.
• absolute - avviene un posizionamento assoluto tramite le proprietà top, bottom, left e right. Gli elementi posizionati assolutamente si trovano al di fuori del normale flusso del testo. La posizione assoluta è calcolata relativamente ai bordi dell'elemento genitore (ma solo se questo non ha la proprietà position: static).
• fixed - l'elemento viene posizionato assolutamente. Durante lo scroll l'elemento rimane fermo.
Le prime due varianti consentono un posizionamento variabile. In questo caso gli elementi vengono posizionati l'uno rispetto all'altro. I due esempi seguenti mostrano come potrebbe apparire questo tipo di posizionamento:
• L'Elemento 2 viene spostato di 30 pixel rispetto all'Elemento 1.
• L'Elemento 2 viene posizionato dietro all'Elemento 1.
La situazione è diversa per fixed e static. Con questi è possibile posizionare gli elementi in posizioni specifiche. Le indicazioni di posizionamento si riferiscono all'elemento padre o alla finestra del browser. Un esempio:
• L'Elemento 1 viene posizionato esattamente 30 pixel dal margine destro e 20 pixel dal margine superiore della finestra del browser.
Di seguito verranno presentate in dettaglio le varie varianti di posizionamento. Prima però un avviso: Nel contesto del posizionamento degli elementi, il cosiddetto float svolge un ruolo importante. In un prossimo tutorial approfondirò questo importante principio di CSS. In generale, il float riguarda il flusso degli elementi della pagina nel documento. Gli elementi vengono spinti nella direzione corrispondente il più possibile. Il posizionamento degli elementi permette di determinare esplicitamente il flusso degli elementi.
Il posizionamento relativo
Utilizzando il posizionamento relativo con position: relative, avvengono due cose:
• Il box viene spostato dal suo normale flusso.
• Lo spazio originale dell'elemento viene riservato.
La riservazione dello spazio originale fa sì che gli altri elementi si comportino come se l'elemento fosse effettivamente ancora al suo posto.
Un esempio:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: relative;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</body>
</html>Sono stati definiti tre box. 
I due box 2 e 3 non hanno ricevuto istruzioni di posizionamento. Seguono quindi il flusso normale del documento. Il box 1 è invece posizionato relativamente. Questo significa che i box 2 e 3 non vengono affetti dal box 1. Lo spazio del box 1 non viene dunque occupato da questi box. Con le indicazioni top, bottom, left e right avviene il posizionamento dei box. Con il posizionamento relativo si parte dalla posizione originaria nel flusso del documento (flow).
• top: 25px - il box viene spostato di 25 pixel verso il basso. Nella posizione normale del box vengono quindi inseriti 25 pixel nella parte superiore.
• right: 25px - il box viene spostato di 25 pixel verso sinistra. Nella posizione normale del box vengono inseriti 25 pixel nella parte destra.
Le indicazioni in pixel vengono viste relativamente alla posizione originaria. Le indicazioni determinano dove verrà inserito il valore, quindi in alto e a destra. Questo aspetto è cruciale. Le indicazioni non definiscono dove il box verrà spostato.
Il posizionamento assoluto
Proseguiamo con il posizionamento assoluto. Questo tipo di posizionamento rimuove completamente l'elemento dal flusso. Gli altri elementi nella pagina si comportano come se l'elemento non esistesse affatto.
Un esempio:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: absolute;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</body>
</html>Anche qui sono stati definiti tre box. Il box 1 è posizionato in modo assoluto.
A differenza del posizionamento relativo, per il box 1 non è riservato uno spazio. I box 2 e 3 si spostano verso l'alto.
Le indicazioni di posizionamento top, right, bottom o left ora non si basano più sulla posizione originale del box nel flusso. Piuttosto, si riferiscono all'elemento contenitore più vicino posizionato con relative, absolute o fixed. Se non c'è un elemento contenitore, la posizione è relativa all'elemento principale dell'albero del documento, cioè a html.
Un posizionamento con fixed
Con position: fixed è possibile fissare degli elementi. Ecco un esempio:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p { margin-left: 25%; }
#fixiert {
position: fixed;
top: 20px;
left: 20px;
background-color:#33FFCC;
width: 20%;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="fixiert">Effetto splitter Parte 1</div>
<p>Solo per un breve periodo l'ultimo tutorial o video training sia nella visualizzazione online che il contenuto dalla categoria download è privo di punti. Scopri di più qui ...</p>
</body>
</html>La scatola fissata non scorre insieme, ma rimane sempre ferma nella posizione che le è stata assegnata.
Per le scatole fisse l'elemento circostante è sempre la finestra del browser.
Si prega di notare che ci sono notevoli problemi soprattutto con la fissazione degli elementi nei browser più vecchi. Ad esempio, IE6 non fa ciò che dovrebbe fare. Chiunque voglia/must ottimizzare i suoi siti web anche per questo browser ora ha due opzioni:
• Rinunciare alle scatole fisse.
• Utilizzare hacks per IE.
Se volete utilizzare un hack, vi consiglio di visitare il sito http://thestyleworks.de/tut-art/iewinfixed.shtml. Lì viene mostrato come gestire le scatole fisse anche per questo browser tramite un piccolo script JavaScript.
