-
|
| .
|
|
|
| |
Css/ Html - position - static, absolute, relative e fixed
Guida trattata da Saiki
Grazie alla proprietà position con i suoi valori static, absolute, relative e fixed possiamo posizionare un elemento in relazione ad altri elementi all'interno del corpo della pagina.
Con l’uso dei valori top (alto), bottom (basso), left (sinistra) e right (destra) possiamo disporre gli elementi precisamente utilizzando unità di misura o percentuali, ecco un'esempio:
CODICE css: .logo {position: absolute; top: 30px; left: 10px} html: <div style="position: absolute; top: 30px; left: 10px;"></div>
Qui di seguito vi spiegerò il significato e la funzione dei valori static, absolute, relative, fixed.
Position: static (statico):
Il valore static manterrà l'elemento fisso, che non può essere spostato, dove rimarrà nella posizione originaria quindi ignorerà i valori top, bottom, left e right.
Position: absolute (assoluto):
Grazie al valore absolute possiamo posizionare l'elemento a nostro piacimento utilizzando le unità di misura/percentuali top, bottom, left e right.
Position: relative (relativo):
Il valore relative disporrà l’elemento in base al suo "contenitore" (elemento che lo contiene) e diversamente dal position absolute i valori top, bottom, left e right non rappresentano punti fissi di posizionamento ma sono basate sulla posizione naturale dell’elemento.
Position: fixed (fisso):
Il valore fixed funziona come l'absolute posizionando l'elemento a nostro piacimento con e unità di misura/percentuali top, bottom, left e right ma differenziandosi che l’elemento fisso si posiziona sempre in base a l’elemento html sempre in relazione alla finestra browser.
Purtroppo questo valore non è supportato da Internet Explorer 6 o inferiore, per farlo funzionare bisognerà utilizzare il doctype corretto.
|
|
|
| .
|
0 replies since 30/12/2012, 21:23 23 views
.
.Css/ Html - position - static, absolute, relative e fixedGuida trattata da Saiki
.
