-
.|Ye|.
.User deleted
Funzione Position
In questa guida impareremo a sfruttare la cosiddetta funzione CSS Position.
Cos'è la funzione Position?
Lo dice la parola stessa: Position significa Posizione. La Position è dunque un'importante funzione che garantisce una precisa collocazione di un determinato elemento in un piano.
Quali sono dunque i suoi vantaggi?
Una libera scelta per quanto riguarda la posizione di qualsiasi elemento in un piano.
Cosa si intende per elemento e piano?- L'elemento, nel CSS o nell'HTML, non è altro che un "oggetto" presente in un forum o anche in un qualsiasi sito web, come ad esempio la tagboard ed il menu utente, o semplicemente un DIV creato tramite html, o una semplice immagine;
- Il piano è, in maniera molto semplificata, ciò che contiene un elemento; ogni elemento è quindi all'interno di un piano, il quale può essere anche l'intero corpo di una pagina. Un piano può essere idealizzato tramite DIV.
E quindi, come funziona il CSS Position?
Il suo funzionamento è molto particolare, ma alla lunga è abbastanza semplice. Esso sfrutta molteplici metodi di posizionamento, in combinazione con i cosiddetti principi di mappatura.
Detta così sembra logicamente arabo, quindi partiamo con lo spiegare cosa sono i principi di mappatura.I Principi di Mappatura
Ragionandoci un po' ci si potrebbe anche arrivare. Il termine "mappatura" non deriva altro che da "mappa" (o cartina). Come tutti saprete una mappa non è altro che un riquadro, spesso rettangolare, in cui al suo interno vengono immesse delle rappresentazioni in scala di un determinato territorio. Per collocare o comunque evidenziare un preciso elemento della mappa ci serviamo di un metodo diffuso praticamente in tutto il mondo: le coordinate (espresse in longitudine e latitudine). Ecco, i principi di mappatura, non sono altro che le coordinate che noi evidenziamo, o meglio, che noi attribuiamo ad un determinato elemento di un piano.
Coordinate... longitudine e latitudine... e questo come lo interpretiamo a livello di codice?
I nostri "sistemi di misura" per quanto riguarda il posizionamento, si basano su quattro importanti valori, che sono:CODICEtop
bottom
left
right
Che possiamo tradurre in ordine come: in cima, in fondo, a sinistra, a destra. Le loro funzioni dovrebbero essere piuttosto chiare.
Ora però, se possiedo i valori di posizionamento, dall'altra parte non possiedo un metodo preciso di partenza! Quindi non ho un'idea chiara di come devo agire; per questo abbiamo bisogno di un preciso metodo di posizionamento.Metodi di posizionamento
Un metodo di posizionamento non è altro che una modalità, uno stile, un approccio con cui un elemento si identifica rispetto al proprio piano. Chiaramente è possibile utilizzare un solo metodo di posizionamento per elemento (nel css, selettore).
Prima di tutto per attribuire una posizione, dovremmo, all'interno di un selettore richiamato nel CSS o all'interno di un div che richiama uno stile, riportare la dicitura position:.CODICENel CSS
.elemento {position: }
Nell'HTML
<div style="position: "></div>
Logicamente, dopo i due punti, seguirà il termine relativo allo stile di posizionamento. Di seguito vi elencherò i vari stili, spiegandoveli.
1. Posizionamento STATIC (statico)
Lo dice la parola stessa: statico significa fisso, fermo, ancorato, che non può essere spostato. Infatti questo stile "blocca" il posizionamento di un elemento e lo forza a rimanere nella posizione naturale di origine. A sua volta annulla i vari principi di mappatura (visti in precedenza).
Si identifica con la dicitura "position:", seguita da static.CODICENel CSS
.elemento {position: static}
Nell'HTML
<div style="position: static"></div>
2. Posizionamento ABSOLUTE (assoluto)
Il posizionamento assoluto altro non è che l'attribuzione della posizione di un elemento contenuto in un piano. Un po' come il gioco della battaglia navale, solo che al posto di utilizzare le lettere e i numeri ci serviamo dei principi di mappatura, attribuendo loro una unità di misura (pixel) o una percentuale!
ATTENZIONE: L'elemento NON può logicamente uscire dal piano che lo contiene, a meno che questo non specifichi a sua volta una posizione, in quel caso verrà presa in considerazione l'INTERA pagina web, dall'alto fino al basso e da destra fino a sinistra!
Si identifica con la dicitura "position:", seguita da absolute.CODICENel CSS
.elemento {position: absolute}
Nell'HTML
<div style="position: absolute"></div>
3. Posizionamento FIXED (fisso)
Forse uno dei posizionamenti più conosciuti. Il suo funzionamento è praticamente uguale a quello dell'absolute, con alcune differenze:- Il piano dell'elemento diventa praticamente l'intera pagina del browser, ignorando eventuali form presenti sul forum ed estraniandosi da tutto il resto;
- L'elemento rimane fisso ove è stato posizionato (tramite principi di mappatura) ed ignora l'eventuale movimento della scrollbar, "coprendo" tutto ciò che vi è sotto. Diventa una sorta di elemento insormontabile della pagina.
Non è compatibile con Internet Explorer.
Si identifica con la dicitura "position:", seguita da fixed.CODICENel CSS
.elemento {position: fixed}
Nell'HTML
<div style="position: fixed"></div>
Come renderlo compatibile con Internet Explorer.
Esiste un modo per renderlo compatibile anche per internet explorer, è sufficiente impostare il codice in questa maniera:CODICENel CSS
.elemento {bottom:expression(20-(y=document.body.scrollTop)+\'px\'); position:fixed!important; position:absolute; right:VALORE;bottom:VALORE}
Nell'HTML
<div style="bottom:expression(20-(y=document.body.scrollTop)+\'px\'); position:fixed!important; position:absolute; right:VALORE;bottom:VALORE"></div>
4. Posizionamento RELATIVE (relativo)
Il termine "relativo" si riferisce ad una modifica in relazione ad un qualcosa, legata ad un qualcosa, partita da un qualcosa. Diversamente dal sistema di spostamento adottato da absolute e fixed, che prevede una attribuizione di un punto su un piano, il sistema di spostamento relative è fortemente legato alla posizione naturale (di origine) in cui si posiziona l'elemento, prendendo come partenza quella stessa posizione.
Si identifica con la dicitura "position:", seguita da relative.CODICENel CSS
.elemento {position: relative}
Nell'HTML
<div style="position: relative"></div>Parte pratica
Passiamo alla parte pratica in cui, tramite DIV che richiamano uno stile, vi mostrerò i vari funzionamenti del position.
Per mostrarvi utilizzerò il mio altervista, dato che il position non funziona nei topic. Potevo anche mostrarvi il tutto su un forum di prova, ma sarebbe venuto troppo confusionato
.
Utilizzo della funzione Static
1. La prova consiste nell'attribuire ad un elemento la funzione static. Proviamo a creare un'area trasparente di 200x200 con 2 pixel di bordo arancione e con posizione statica.
Questo il codice:CODICE<div style="position: static; width: 200px; height: 200px; border: 2px solid orange;"></div>
Ecco il risultato.
Chiaramente l'area creata ci appare in alto a sinistra, ovvero nella sua posizione naturale.
2. Ora però creiamo la stessa area di prima tramite DIV e proviamo a spostare l'elemento da qualche parte.
Ecco il risultatoCODICE<div style="position: static; bottom: 0px; left: 50%; width: 200px; height: 200px; border: 2px solid orange;"></div>
Come vedete nel codice usato, servendomi dei principi di mappatura, ho cercato di spostare il mio intero div in basso (usando bottom: 0px, nonché distanza pari a ZERO dal BASSO) al 50% della larghezza (usando left: 50%, ovvero distanza pari al cinquanta percento dell'intera pagina partendo da sinistra), però i risultati sono stati nulli, il div non si sposta dalla posizione di origine!
3. Per definire dunque una posizione di origine basta semplicemente applicare un div align esterno al nostro div, oppure un semplice center per centrarlo, in questo modo:
Centrato con tag centerCODICE<center><div style="position: static; bottom: 0px; left: 50%; width: 200px; height: 200px; border: 2px solid orange;"></div></center>
Spostato a destra tramite div alignCODICE<div align="right"><div style="position: static; bottom: 0px; left: 50%; width: 200px; height: 200px; border: 2px solid orange;"></div></div>
Utilizzo della funzione Absolute
1. Proviamo ora - prendendo il codice di esempio nel punto 2 della funzione Static - ad utilizzare questa volta il posizionamento assoluto.
RisultatoCODICE<div style="position: absolute; bottom: 0px; left: 50%; width: 200px; height: 200px; border: 2px solid orange;"></div>
Questa volta, sfruttando gli stessi valori di mappatura utilizzati per lo Static, il blocco div sembra essersi spostato esattamente nella posizione impartitagli.
NOTA: Il piano del nostro div, in questo frangente, non è altro che l'intera pagina web
2. Ora creiamo un piano (un contenitore) al nostro div, con un altro div che comprende un'area trasparente di 400x400 con 2 pixel di bordo blu e con NESSUNA posizione specificata.
Questo il codice:CODICE<div style="width: 400px; height: 400px; border: 2px solid blue"><div style="position: absolute; bottom: 0px; left: 50%; width: 200px; height: 200px; border: 2px solid orange;"></div></div>
Questo il risultato
Come vedete, il nostro div arancione, seppur all'interno del div blu, preferisce ignorarlo prendendo come piano la solita pagina intera. Ovviamente il div blu si trova in alto a sinistra per la ragione spiegata sopra: quella è la sua posizione naturale.
3. Ora prendiamo lo stesso codice, ma questa volta attribuiamo al div blu uno stile di posizione, come per esempio lo stesso absolute, in questo modo:CODICE<div style="position: absolute; width: 400px; height: 400px; border: 2px solid blue"><div style="position: absolute; bottom: 0px; left: 50%; width: 200px; height: 200px; border: 2px solid orange;"></div></div>
Questo il risultato
Questa volta si può notare che il div arancione ha dato retta (
) al div blu, spostandosi esattamente in basso al centro rispetto ad esso.
NOTA: Il quadrato non è perfettamente al centro perché i valori di mappatura considerano la distanza dai LATI dell'elemento, in questo caso se si attribuisce un 50% da sinistra, terrà conto di una distanza pari a 50% dal lato sinistro.
NOTA2: Nel caso si attribuisca la "position: static" al div blu, quello arancione riprenderà ad ignorarlo. Con qualsiasi altra "position:" invece si ottiene lo stesso risultato riscontrato nell'esempio qui sopra.
Utilizzo della funzione Fixed
Non è compatibile con Internet Explorer.
Prendiamo il nostro solito div arancione e posizioniamolo in basso a sinistra, utilizzando il fixed. Così:CODICE<div style="position: fixed; bottom: 0px; right: 0px; width: 200px; height: 200px; border: 2px solid orange">Tanto non ti scappo =P</div>
bottom: 0px e right: 0px equivalgono a distanza ZERO partendo dal FONDO a DESTRA.
Ho aggiunto poi un testo abbastanza lungo, in modo da abilitare la scrollbar a lato e far scorrere la pagina.
Ecco il risultato
Nonostante si sposti la scrollbar il nostro simpatico arancio non si sposta di un millimetro
Come renderlo compatibile con Internet Explorer.
Esiste un modo per renderlo compatibile anche per internet explorer, è sufficiente impostare il codice in questa maniera:CODICENel CSS
.elemento {bottom:expression(20-(y=document.body.scrollTop)+\'px\'); position:fixed!important; position:absolute; right:VALORE;bottom:VALORE}
Nell'HTML
<div style="bottom:expression(20-(y=document.body.scrollTop)+\'px\'); position:fixed!important; position:absolute; right:VALORE;bottom:VALORE"></div>
Utilizzo della funzione Relative
Prendiamo ancora una volta il nostro arancione, questa volta utilizzando il relative, e cambiamo la sua posizione naturale centrandolo con il tag center.CODICE<center><div style="position: relative; width: 200px; height: 200px; border: 2px solid orange"></div></center>
Anteprima
Ora vogliamo abbassare il nostro arancio di 100 pixel rispetto alla sua attuale posizione: usiamo i valori di mappatura.CODICE<center><div style="position: relative; top: 100px; width: 200px; height: 200px; border: 2px solid orange"></div></center>
Ho utilizzato top: 100px perché ho impartito 100px di distanza dall'ALTO, di conseguenza il div si abbassa.
Ecco il risultato
Ecco tutto, spero di essere stato abbastanza chiaro ed esaustivo
. Non è necessario inserire i crediti se intendete utilizzare i codici riportati qui, ma se intendete divulgare la guida da qualche altra parte chiedete prima il permesso a me . Per problemi sentitevi libero di rivolgervi nella sezione Supporto, grazie.La guida cui sopra è stata realizzata da .|Ye|. per lo Skinfactory.
Edited by .|Ye|. - 23/5/2012, 13:22
. -
Luke Estasi .
User deleted
Oh finalmente capito la funzione position! Ho letto molte guide sul web ma non ci ho mai capito niente. Grazie mille :3 . -
.
non sapevo che fixed non funzionasse con IE
ah continua a deludermi mitico Firefox xD. -
8mile .
User deleted
ihih, su chrome funziona tutto... . -
.|Ye|. .
User deleted
non sapevo che fixed non funzionasse con IE
ah continua a deludermi mitico Firefox xD
Sì, quindi attenzione. Prendetelo con le pinze il fixed
. -
ric87 .
User deleted
grzie per la guida
. -
.
c'è un modo per centrare il fixed? perchè (per esempio) nel mio forum se questo sta al centro vuol dire che sta al'interno del container, ma se uso il fixed devo mettere io le "coordinate" con top, left ecc...e cambia in base la risoluzione... . -
.|Ye|. .
User deleted
È possibile farlo, tuttavia l'elemento con posizione fissa deve avere le dimensioni specificate (o note). CODICE.selettore {position: fixed; height: VALOREpx; top: 50%; margin-top: -META'HEIGHTpx; width: VALOREpx; left: 50%; margin-left: -META'WIDTHpx}
Su height imposti l'altezza del tuo elemento. Su margin-top imposti la META' dell'altezza effettiva in negativo.
Su width imposti la larghezza del tuo elemento. Su margin-left imposti la META' della larghezza effettiva in negativo.
Esempio: se il tuo elemento settato in posizione fissa è alto 300px e lungo 400px, sarà così:CODICE.selettore {position: fixed; height: 300px; top: 50%; margin-top: -150px; width: 400px; left: 50%; margin-left: -200px}. -
.
grazie 
. -
.|Ye|. .
User deleted
figurati . -
.
Attualmente io uso molto questi tag sia per le skin che per i layout. Bisogna direi che le combinazioni che si possono ottenere tra il relative e l'absolute danno la possibilità di creare layout molto fantasiosi, facilitando di molto il montaggio. Io personalmente uso il relative per creare una sorta di contenitore centrale, dove posizione gli elementi come voglio tramite l'absolute. . -
Patruk .
User deleted
per centrare l'absolute vale la stessa cosa del fixed? o c'è un metodo più semplice? . -
.
come per il fixed . -
.|Ye|. .
User deleted
Aggiunto il "Come renderlo compatibile con Internet Explorer." sul position fixed. . -
Drew. .
User deleted
grazie per l'aggiornamento ye, il rendere comptibile con explorer è sempre un caos xD .
Funzione Position[ Html - Css ] Per imparare a posizionare gli elementi dell'HTML usando il CSS. |
