CSS: Positioning

0 Flares Twitter 0 Facebook 0 LinkedIn 0 Email -- StumbleUpon 0 0 Flares ×

La parte dei CSS relativa al posizionamento è un argomento complesso ma estremamente importante per le potenzialità che offre.

I CSS offrono vari metodi per posizionare gli elementi sulle pagine, ma di certo un ruolo importante è rivestito dalla proprietà position la quale specifica il tipo di posizionamento che viene utilizzato per un dato elemento (static, relative, absolute or fixed).

position: static;

Questo è il metodo di default. Un elemento con position: static; non è posizionato in nessun modo particolare, segue il normale flusso della pagina e non è influenzabile dalle proprietà top, bottom, left, right, z-index.

Un elemento statico è detto non posizionato, mentre gli elementi aventi position impostata a qualunque altro valore sono detti posizionati.

 

position: relative;

Un elemento con  position: relative; si comporta normalmente come un elemento posizionato static, a meno che non vengano aggiunte alcune specifiche proprietà: top, bottom, left, right; in tal caso l’elemento posizionato relative verrà relativamente alla sua attuale posizione, senza che ciò incida o alteri il posizionamento degli altri elementi della pagina.

Spostandosi, l’elemento lascerà uno spazio vuoto, che non verrà riempito dagli altri elementi della pagina.

Così  left: 20px  aggiungerà 20 px alla sua attuale posizione, e dallo spostamento resterà uno spazio vuoto che non verrà occupato dagli elementi vicini.

http://info.template-help.com/help/wp-content/uploads/2011/12/css-positions-1.jpg

 

position: absolute;

Un elemento posizionato absolute viene rimosso dal normale flusso della pagina e posizionato in maniera assoluta (attraverso le coordinate fornite dalle proprietà top, bottom, left, right) relativamente al suo elemento contenitore (che non sia static). Una volta spostato non lascerà alcuno spazio vuoto nel documento (differentemente dal posizionamento relativo).

La vera differenza tra posizionamento assoluto e relativo sta nel fatto che nel posizionamento assoluto l’elemento verrà spostato (attraverso le coordinate fornite dalle proprietà top, bottom, left, right) in relazione al suo elemento contenitore, e non in relazione al suo posizionamento attuale (posizionamento relativo). A differenza del posizionamento relativo, in quello assoluto non rimarrà alcuno spazio vuoto lasciato dall’elemento spostato.

Quindi un position: relative – top: 10px – abbasserà l’elemento di 10px rispetto a dove si trova, mentre un position: absolute – top: 10px – abbasserà di 10px l’elemento rispetto al suo elemento contenitore.

Absolute-Positioning-in-CSS

 

css-position-absolute-relative

 

http://project67555.appspot.com/images/css_positioning.gif

 

position: fixed;

Questa è una forma di posizionamento che posiziona l’elemento in relazione alla finestra del browser invece che dell’elemento contenitore. Non si avrà alcun effetto sulla posizione degli elementi della pagina. Un elemento posizionato fixed non subirà lo scroll della pagina, rimarrà ancorato fisso alla sua posizione perchè essa è legata non alla pagina (come per un elemento posizionato absolute, che è posizionato in base al suo elemento contenitore diretto) ma alla finestra del browser.

Così come per relativeabsolute anche per fixed vengono utilizzate le proprietà top, right, bottom, e left.

Un elemento fisso non lascia del vuoto nel punto della pagina in cui normalmente sarebbe dovuto essere, esattamente come un elemento absolute (differentemente da un elemento relative, che invece lascia uno spazio vuoto dopo il suo spostamento).

 

position-css

 

fixed-relative

Articoli consigliati:

 

0 Flares Twitter 0 Facebook 0 LinkedIn 0 Email -- StumbleUpon 0 0 Flares ×
 

Lago