Presentazione La Sintassi In Linea Nella Pagina Nel Foglio esterno Le Classi I Selettori ID
La Grafica i Links Attrib. Testo Attrib. Colore Attrib. Sfondi Attrib. Posizione Parametri

Attributi Posizione

Abbiamo detto che gli attributi devono essere inseriti all'interno di parentesi graffe { } e laddove in HTML verrebbe usato un "=" (uguale) viene invece usato ":" (due punti). Argomenti consecutivi sono separati da ";" (punto e virgola) invece che da "," (virgola). Inoltre molti argomenti sono divisi da - (trattini) anche se questi fanno parte integrante del nome stesso. Per i parametri associabili agli attributi fare riferimento alla pagina   Parametri 

position : absolute | relative ;

 
La creazione di un livello tipo potrebbe essere questa, giÓ vista nella sezione riguardante gli ID:

{position: absolute; top: 50px;left: 20px; zindex: 1;}

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.

position : absolute | relative ;

 

Contenitore o livello posizionato in modo assoluto a 100 px dal lato sinistro e 50 px dal bordo superiore della finestra del browser.

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

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.

top : lunghezza | percentuale | auto ;

 

Contenitore o livello posizionato in modo assoluto a 50 px dal bordo superiore e 100 px dal lato sinistro della finestra del browser.

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

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

left : lunghezza | percentuale | auto ;

 

Contenitore o livello posizionato in modo assoluto a 100 px dal lato sinistro e 50 px dal bordo superiore della finestra del browser.

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

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

width : larghezza ;

 

Contenitore o livello con una sua dimensione in larghezza di 300 px posizionato in modo assoluto a 100 px dal lato sinistro e 50 px dal bordo superiore della finestra del browser.

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

Determina la larghezza del contenitore se posizionato in modo absolute.

height : altezza ;

 

Contenitore o livello con una sua dimensione in altezza di 400 px con a larghezza di 300 px posizionato in modo assoluto a 100 px dal lato destro e 50 px dal bordo superiore della finestra del browser.

{position:absolute; height:400px; width:300px; left:100px; top:50px;}

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

visibility : visible | hidden | inherit ;

 

Contenitore o livello nascosto, con una sua dimensione in altezza di 400 px con a larghezza di 300 px posizionato in modo assoluto a 100 px dal lato sinistro e 50 px dal bordo superiore della finestra del browser. Se non viene specificato alcun attributo per default il contenitore Ŕ visible.

{position:absolute; visibility:hidden; height:400px; width:300px; left:100px; top:50px;}

Determina la visibilitÓ del contenitore, questo infatti potrebbe sparire se associato al suo attributo hidden.

z-index : valore;

 

Contenitore o livello con prioritÓ negativa (-1) che lo posiziona addirittura sotto lo sfondo (non tutti i browser lo gestiscono se negativo) con una sua dimensione in altezza di 400 px con a larghezza di 300 px posizionato in modo assoluto a 100 px dal lato sinistro e 50 px dal bordo superiore della finestra del browser. Se non viene specificato alcun attributo per default il contenitore Ŕ visible.

{position:absolute; z-index:-1; height:400px; width:300px; left:100px; top:50px;}

Determina la prioritÓ di visualizzazione del contenitore rispetto allo sfondo della pagina o rispetto ad altri contenitori posizionati sullo schermo.

Continua:    Parametri

 


RIZZI RENATO

renato@renatoweb.it