Gli attributi per il posizionamento dei box 

0
57

Prima di passare in rassegna le categorie di attributi vorrei ricordare ancora una volta la loro sintassi, a prescindere da quale dei vari modi deciderete di usare.

Abbiamo detto che gli attributi devono essere inseriti all’interno di parentesi graffe { } e laddove in HTML verrebbe usato un “=” (uguale) nei css viene invece usato “:” (due punti).

Argomenti consecutivi sono separati da un “;” (punto e virgola) invece che dalla “,” (virgola). Inoltre molti argomenti sono divisi da “-“ (trattino centrale) che fa parte integrante del nome stesso.

Gli spazi vuoti ed i ritorno a capo non hanno alcuna influenza.

selettore {
proprietà: valore;
proprietà: valore;
}

 

Per i valori fare riferimento a questa tabellina.

Prima di vedere gli attributi di posizionamento è bene ricordare che questi difficilmente saranno adoperati singolarmente, essi infatti fanno parte di un insieme di altri parametri che servono a definire e posizionare un contenitore box all’interno di una pagina web.

Vedere anche quanto detto sul box model a questo proposito, visto che non tutti i browser si comportano allo stesso modo.

 


 

position: absolute | relative | fixed | static

Determina il tipo di posizionamento che dovrà assumere il contenitore creato sullo schermo in uno dei possibili modi.

Absolute o Relative, in entrambi i casi l’attributo ha ragione di esistere se abbinato con gli altri attributi di posizionamento.

 

#css {position: absolute; left: 100px; top: 50px;}

Contenitore posizionato in modo assoluto a 100px dal margine sinistro e 50px dal margine superiore della finestra del browser.

Torna ad inizio pagina


 

top: lunghezza | percentuale | auto

Determina la distanza del contenitore dal margine superiore della finestra del browser. Si possono adoperare tutti i valori ammessi riportati nella tabella parametri.

 

#css {position: absolute; top: 50px; left: 100px;}

Contenitore posizionato in modo assoluto a 50px dal bordo superiore della finestra del browser.

Torna ad inizio pagina


 

left: lunghezza | percentuale | auto

Determina la distanza del contenitore dal margine laterale sinistro della finestra del browser. Si possono adoperare tutti i valori ammessi riportati nella tabella parametri.

 

#css {position: absolute; top: 50px; left: 100px;}

Contenitore posizionato in modo assoluto a 100 px dal margine sinistro della finestra del browser.

Torna ad inizio pagina


 

width: lunghezza | percentuale | auto

Determina la larghezza del contenitore se posizionato in modo absolute.

#css {position: absolute; width: 300px; left: 100px; top: 50px;}

Contenitore con dimensione in larghezza di 300 px posizionato in modo assoluto nella finestra del browser.

Torna ad inizio pagina


 

height: lunghezza | percentuale | auto

Determina l’altezza del contenitore se posizionato in modo absolute.

#css {position: absolute; height: 400px; ... }

Contenitore con dimensione in altezza di 400 px posizionato in modo assoluto nella finestra del browser.

Torna ad inizio pagina


 

visibility: visible | hidden | collapse

Determina la visibilità del contenitore, questo potrebbe non essere visibile se associato all’ attributo hidden.

#css {position: absolute; visibility: hidden; height: 400px; ... }

Contenitore nascosto. Se non viene specificato alcun attributo per default il contenitore è visible.

Torna ad inizio pagina


 

z-index: valore

Determina la priorità di visualizzazione del contenitore rispetto allo sfondo e/o rispetto ad altri contenitori posizionati all’interno della stessa pagina.

#css {position: absolute; z-index: 10; height: 400px; ... }

Contenitore con priorità (10). Il browser IE accetta anche valori negativi che posizionano il contenitore sotto lo sfondo della pagina senza bisogno di assegnare a questa uno z-index superiore.

Torna ad inizio pagina


 

Continua: Conclusioni Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.

PS: vuoi imparare a usare l'HTML come un vero professionista in pochissimo tempo?

Segui il miglior video corso di HTML

corso HTML5

Impara la tecnologia che sta ALLA BASE del mondo Internet di oggi, in particolar modo se vuoi creare siti facilmente indicizzabili e responsive.

12345
33 Recensioni, aggiornato l'8 agosto 2018

CONDIVIDI
Articolo precedenteGli attributi per il colore e lo sfondo
Prossimo articoloGli attributi per il Testo
La nostra redazione è costantemente impegnata nel ricercare fonti attendibili e produrre contenuti informativi, guide e suggerimenti utili gratuiti per i lettori di questo sito.

LASCIA UN COMMENTO

Please enter your comment!
Please enter your name here