Il Box Div - EINAUDI

Il Box Div
E’ consigliabile creare dei Box Div con posizionamento assoluto per garantire maggiore compatibilità tra i
principali browser.
Esempio:
top
width
left
right
height
bottom
La coppia di coordinate per posizionare il Div si riferisce sempre al div di livello superiore.
Il corrispondente CSS di un div sarà:
div#esempio{
position: absolute;
top: 106px;
left: 300px;
width: 664px;
height: 800px;
background-color: #1d1d1d;
background: url(immagine.jpg)
}
esempio= Nome del Div
posizionamento assoluto (metterlo sempre)
distanza dal bordo superiore espressa in pixel
distanza dal bordo sinistro espresso in pixel
larghezza del Box espresso in pixel
altezza del box espresso in pixel
eventuale colore di sfondo
eventuale imagine di sfondo
CSS position: posizione d’un elemento in modo statico, assoluto, relativo e fisso
Pag. 1
CSS POSITION: posizione d’un elemento in modo statico, assoluto, relativo e fisso
La proprietà css position con i suoi valori static, absolute, relative e fixed permette di posizionare un
elemento in relazione ad un altro elemento o allo corpo stesso della pagina.
Con l’uso di semplici esempi online, vedremo la proprietà CSS position, l’applicazione di questi 4 differenti
valori con l’uso delle dichiarazione top (alto), bottom (basso), left (sinistra) e right (destra) per posizionare
più precisamente l’elemento con unità di misure o percentuale.
Per iniziare, vediamo quale sarebbe il flusso normale della pagina con l’uso di 3 div a bordi colorati:



uno giallo (‘yellow’)
uno rosso (‘red’) a quale, di seguito, impostiamo le diverse valore della proprietà position
uno nero (‘black’) che servirà di div ‘contenitore’ a ‘red’
L’HTML e CSS di base:
<div style="width:300px; height: 100px; border: 1px solid yellow;">
</div>
<div style="width:300px; height: 300px; border: 1px solid black;">
<div style="width:200px; height: 200px; border: 1px solid red;">
</div>
</div>
Il risultato:
Yellow
red
black
CSS position: posizione d’un elemento in modo statico, assoluto, relativo e fisso
Pag. 2
1. position: static;
Il valore static (statico) è il valore di default e sarebbe uguale alla posizione dell’elemento nell’esempio del
flusso normale. L’elemento ‘statico’ non può essere mosso della sua posizione e ignora le dichiarazioni
top, bottom, left e right.
2. position: absolute;
Il valore absolute (assoluto) permette di rimuovere l’elemento del flusso normale della pagina per poterlo
posizionare con le dichiarazioni top, bottom, left e right in unità di misura.
L’elemento assoluto è posizionato in rapporto al suo div ‘contenitore’ solo se lui stesso ha la sua proprietà
position impostata con un valore diverso da ‘static’.
Esempio 1 position absolute:
‘red’ con position: absolute; top: 0; right: 50px; contenuto in ‘black’ senza posizione specificata.
position:absolute; top:0; right:50px;
<div style="width:300px; height: 100px; border: 1px solid yellow;">
</div>
<div style="width:300px; height: 300px; border: 1px solid black;">
<div style="position: absolute; top:0px; right:50px; width:200px; height: 200px; border: 1px solid red;">
</div>
</div>
yellow
red
black
L’elemento ‘red’ è tolto del flusso naturale e si posiziona in alto a 50px a destra in base alla finestra del
browser. (guardate in alto a destra di questa pagina).
CSS position: posizione d’un elemento in modo statico, assoluto, relativo e fisso
Pag. 3
Il risultato sarebbe lo stesso anche se div ‘red’ non fosse contenuto in div ‘black’, visto che non abbiamo
specificato una posizione a ‘black’ che per default ha posizione ‘static’.
Esempio 2 position absolute:
‘red’ con position: absolute; top: 50px; left: 10px; contenuto in ‘black’ con position: relative;.
position:absolute; top:50px; left:10px;
position:relative;
<div style="width:300px; height: 100px; border: 1px solid yellow;">
</div>
<div style="position: relative; width:300px; height: 300px; border: 1px solid black;">
<div style="position: absolute; top:50px; left:10px; width:200px; height: 200px; border: 1px solid red;">
</div>
</div>
yellow
red
black
Questa volta, l’elemento ‘red’ si posiziona a 50px in alto e 10px a sinistra in base al suo div contenitore
‘black’ visto che, per questo esempio, abbiamo specificato una posizione relative a ‘black’.
3. position: relative;
Il valore relative (relativo) permette di posizionare l’elemento in base al suo div ‘contenitore’.
Contrariamente alla posizione assoluta, le dichiarazione top, bottom, left e right non rappresentano punti
fissi di posizionamento ma sono basate sulla posizione naturale dell’elemento.
Esempio 1 position relative:
‘red’ con position: relative; top: 20px; left: 20px; contenuto in ‘black’.
CSS position: posizione d’un elemento in modo statico, assoluto, relativo e fisso
Pag. 4
position: relative; top:20px; left:20px;
<div style="width:300px; height: 100px; border: 1px solid yellow;">
</div>
<div style=" width:300px; height: 300px; border: 1px solid black;">
<div style="position: relative; top:20px; left:20px; width:200px; height: 200px; border: 1px solid red;">
</div>
</div>
yellow
red
black
L’elemento ‘red’ si sposta verso il basso a sinistra aggiungendo 20px alla posizione iniziale delle sue parte
superiore e sinistra.
4. position: fixed;
NB: NON SUPPORTATO DA INTERNET EXPLORER 6 E INFERIORE. Per IE7, usare il doctype corretto.
Come per la posizione assoluta, il valore fixed (fisso) permette di rimuovere l’elemento del flusso normale
della pagina per poterlo posizionare con le dichiarazioni 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 rimarrà 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.
CSS position: posizione d’un elemento in modo statico, assoluto, relativo e fisso
Pag. 5
Esempio 1 position fixed:
‘red’ con position: fixed; top: 20px; left: 0; contenuto in ‘black’.
position:fixed;top:20px;left:0;
<div style="width:300px; height: 100px; border: 1px solid yellow;">
</div>
<div style=" width:300px; height: 300px; border: 1px solid black;">
<div style="position: fixed; top:20px; left:0px; width:200px; height: 200px; border: 1px solid red;">
</div>
</div>
red
yellow
black
L’elemento ‘red’ è tolto del flusso naturale della pagina e si posiziona a 20px in alto a sinistra in base alla
finestra del browser.
Il risultato sarebbe stato lo stesso anche se div ‘red’ non era contenuto in div ‘black’, visto che è sempre
posizionato in base alle misure della finestra del browser.
Esempio 2 position fixed:
Per questo secondo esempio, tolgo ‘red’ con position: fixed; bottom: 0; left: 0; del suo div contenitore
‘black’.
L’HTML e CSS usato:
< div style="width:300px;height:100px;border:1px solid yellow;"></div>
< div style="width:300px;height: 300px;border: 1px solid black;"></div>
CSS position: posizione d’un elemento in modo statico, assoluto, relativo e fisso
Pag. 6
< div style="width:200px; height: 200px; border: 1px solid red; position:fixed; bottom:0;
left:0;">position:fixed;bottom:0;right:0;</div>
Il risultato:
yellow
black
red
L’elemento ‘red’ è tolto del flusso naturale della pagina e si posiziona in basso a sinistra in base alla finestra
del browser e rimane in una posizione fissa anche quando il resto del corpo della pagine è ‘scrollata’.
http://css.flepstudio.org/css-proprieta/position.html
http://www.yourinspirationweb.com/2010/03/09/css-come-utilizzare-la-proprieta-position-absolute/
CSS position: posizione d’un elemento in modo statico, assoluto, relativo e fisso
Pag. 7