Siccome noto che molti utenti hanno problemi riguardanti l'attributo position del CSS, ecco una semplice guida che lo spiega in modo completo.
Affrontremo la questione in due lezioni. Nella prima esamineremo la proprietà position e le diverse modalità di posizionamento. Nella seconda vedremo con quali proprietà è possibile posizionare con precisione gli elementi e gestirne alcuni decisivi aspetti visuali.
Sintassi
Valori
CSS: Position
La parte dei CSS relativa al posizionamento degli elementi è un argomento complesso, ma affascinante. In prospettiva quello più promettente per le conseguenze che può portare. E' solo con queste regole che si può pensare di realizzare il layout delle nostre pagine solo con i CSS e giungere così alla definitiva e reale separazione tra presentazione e struttura.Affrontremo la questione in due lezioni. Nella prima esamineremo la proprietà position e le diverse modalità di posizionamento. Nella seconda vedremo con quali proprietà è possibile posizionare con precisione gli elementi e gestirne alcuni decisivi aspetti visuali.
Position
position è la proprietà fondamentale per la gestione della posizione degli elementi, di cui determina la modalità di presentazione sulla pagina. Si applica a tutti gli elementi e non è ereditata.Sintassi
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Valori
- static.
- absolute
- fixed
- relative
Static
E' il valore di default, quello predefinito per tutti gli elementi non posizionati secondo un altro metodo. Rappresenta la posizione normale che ciascuno di essi occupa nel flusso del documento.
Absolute
L'elemento, o meglio, il box dell'elemento viene rimosso dal flusso del documento
ed è posizionato in base alle coordinate fornite con le proprietà
top, left, right o bottom.
Il posizionamento avviene sempre rispetto al box contenitore dell'elemento. Questo è rappresentato dal primo elemento antenato (ancestor) che abbia un posizionamento diverso da static. Se tale elemento non esiste il posizionamento avviene in base all'elemento radice HTML, che in condizioni standard coincide con l'area del browser che contiene il documento e che ha inizio dall'angolo superiore sinistro di tale area. Un elemento posizionato in modo assoluto scrorre insieme al resto del documento.
Questa
Mette a confronto un box statico e uno posizionato in modo assoluto.
Il secondo box viene collocato rispetto all'elemento HTML.
In questo
accade se un elemento viene posizionato rispetto ad un elemento ancestor.
Fixed
Usando questo valore il box dell'elemento viene, come per absolute, sottratto al normale flusso del documento. La differenza sta nel fatto che per fixed il box contenitore è sempre il cosiddetto viewport. Con questo termine si intende la finestra principale del borwser, ovvero l'area del contenuto. Altra differenza fondamentale: un box posizionato con fixed non scorre con il resto del documento. Rimane, appunto, fisso al suo post. L'effetto è lo stesso che si può ottenere con l'uso dei frame, in cui una parte della pagina rimane fissa e il resto scorre. Solo che qui il documento è solo uno.
Purtroppo, il valore non è supportato da Explorer su Windows.
L'elemento viene posizionato relativamente al suo box contenitore. In questo caso il box contenitore è il posto che l'elemento avrebbe occupato nel normale flusso del documento. La posizione viene anche qui impostata con le proprietà top, left, bottom, right. Ma qui esse non indicano un punto preciso, ma l'ammontare dello spostamento in senso orizzontale e verticale rispetto al box contenitore.
Link
Vi proponiamo due eccellenti risorse per apprfondire l'argomento:
css.html.it
E' il valore di default, quello predefinito per tutti gli elementi non posizionati secondo un altro metodo. Rappresenta la posizione normale che ciascuno di essi occupa nel flusso del documento.
Absolute
L'elemento, o meglio, il box dell'elemento viene rimosso dal flusso del documento
ed è posizionato in base alle coordinate fornite con le proprietà
top, left, right o bottom.
Il posizionamento avviene sempre rispetto al box contenitore dell'elemento. Questo è rappresentato dal primo elemento antenato (ancestor) che abbia un posizionamento diverso da static. Se tale elemento non esiste il posizionamento avviene in base all'elemento radice HTML, che in condizioni standard coincide con l'area del browser che contiene il documento e che ha inizio dall'angolo superiore sinistro di tale area. Un elemento posizionato in modo assoluto scrorre insieme al resto del documento.
Questa
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
mostra l'applicazione della proprietà. Mette a confronto un box statico e uno posizionato in modo assoluto.
Il secondo box viene collocato rispetto all'elemento HTML.
In questo
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
, invece, abbiamo effettuato la verifica rispetto ad un altro punto: accade se un elemento viene posizionato rispetto ad un elemento ancestor.
Fixed
Usando questo valore il box dell'elemento viene, come per absolute, sottratto al normale flusso del documento. La differenza sta nel fatto che per fixed il box contenitore è sempre il cosiddetto viewport. Con questo termine si intende la finestra principale del borwser, ovvero l'area del contenuto. Altra differenza fondamentale: un box posizionato con fixed non scorre con il resto del documento. Rimane, appunto, fisso al suo post. L'effetto è lo stesso che si può ottenere con l'uso dei frame, in cui una parte della pagina rimane fissa e il resto scorre. Solo che qui il documento è solo uno.
Purtroppo, il valore non è supportato da Explorer su Windows.
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
RelativeL'elemento viene posizionato relativamente al suo box contenitore. In questo caso il box contenitore è il posto che l'elemento avrebbe occupato nel normale flusso del documento. La posizione viene anche qui impostata con le proprietà top, left, bottom, right. Ma qui esse non indicano un punto preciso, ma l'ammontare dello spostamento in senso orizzontale e verticale rispetto al box contenitore.
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
Link
Vi proponiamo due eccellenti risorse per apprfondire l'argomento:
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
. Su WebReference: esaustivo.css.html.it
Ultima modifica:
