> 
- Home Page
- > Manuale CSS
- > Proprietą CSS di Posizionamento
Permettono di controllare la posizione degli elementi.
Proprietą CSS di Posizionamento
Definiscono la posizione di un elemento.
Posizionamento CSS
Proprietà:
| Proprieta | Descrizione | Valori | Esempi |
|---|---|---|---|
| bottom | Il vertice in basso dell’elemento auto | auto lunghezza percentuale |
¤ bottom ¤ |
| left | Il vertice sinistro dell’elemento | auto lunghezza percentuale |
¤ left ¤ |
| right | Il vertice destro dell’elemento | auto lunghezza percentuale |
¤ right ¤ |
| top | Il vertice in alto dell’elemento | auto lunghezza percentuale |
¤ top ¤ |
| overflow | Cosa succede se il contenuto di un elemento è più grande dell’area | visible hidden scroll auto |
¤ overflow ¤ |
| position | Posiziona un elemento in posizione static, relative, absolute o fixed | static relative absolute fixed |
¤ position ¤ |
| vertical-align | Allineamento verticale dell’elemento |
baseline bottom middle subsuper top text-top text-bottom lunghezza percentuale |
¤ vertical-align ¤ |
| z-index | Imposta l’ordine degli elementi | auto numero |
¤ z-index ¤ |
bottom
Specifica il vertice in basso dell’elemento.
Valori possibili sono:
- auto
- lunghezza
- percentuale
Esempio
.VerticeBasso {
position: absolute;
bottom: 50px;
width: 100px;
height: 100px;
border: 1px solid #000;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ left
Imposta il vertice sinistro dell’elemento.
Valori possibili sono:
- auto
- lunghezza
- percentuale
.VerticeSinistro {
position: absolute;
left: 150px;
width: 100px;
height: 100px;
border: 1px solid #000;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ right
Imposta il vertice destro dell’elemento.
Valori possibili sono:
- auto
- lunghezza
- percentuale
.VerticeDestro {
position: absolute;
right: 150px;
width: 100px;
height: 100px;
border: 1px solid #000;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ top
Imposta il vertice in alto dell’elemento.
Valori possibili sono:
- auto
- lunghezza
- percentuale
.VerticeAlto {
position: absolute;
top: 150px;
width: 100px;
height: 100px;
border: 1px solid #000;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ overflow
Cosa succede se il contenuto di un elemento è più grande dell’area.
Valori possibili sono:
- visible (Il contenuto è visualizzato al di fuori dell’elemento)
- hidden (Il contenuto in eccesso non è visualizzato)
- scroll (Viene visualizzata una scrollbar per scorrere il contenuto in eccesso)
- auto (Se c’è contenuto in eccesso, viene visualizzata la scrollbar, altrimenti no.)
Esempio
<html>
<style>
body {
margin: 2px;
padding: 0px;
}
#ContenutoConScrollBar {
width: 400px;
height: 200px;
padding: 0px;
border: 1px solid #000;
overflow: auto;
}
</style>
<body>
<div id="ContenutoConScrollBar">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br/>
Nulla dapibus tempor metus. Nam ligula. Praesent consectetuer iaculis neque. Nulla pretium accumsan dolor.<br/>
Curabitur augue. Ut et ipsum. Integer tellus massa, blandit ac, condimentum id, imperdiet sed, mauris. Proin ante. <br/>
Nulla nec mi. Morbi mauris. Phasellus lobortis tincidunt dui. Phasellus in orci quis dui sagittis consequat. <br/>
Duis lacinia consequat urna. Nunc turpis. Nam in enim. Integer a lacus. Cras at lacus. <br/>
Etiam elit velit, imperdiet non, congue at, ultricies a, metus.<br/><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br/>
Nulla dapibus tempor metus. Nam ligula. Praesent consectetuer iaculis neque. Nulla pretium accumsan dolor.<br/>
Curabitur augue. Ut et ipsum. Integer tellus massa, blandit ac, condimentum id, imperdiet sed, mauris. Proin ante. <br/>
Nulla nec mi. Morbi mauris. Phasellus lobortis tincidunt dui. Phasellus in orci quis dui sagittis consequat. <br/>
Duis lacinia consequat urna. Nunc turpis. Nam in enim. Integer a lacus. Cras at lacus. <br/>
Etiam elit velit, imperdiet non, congue at, ultricies a, metus.
</div>
</body>
</html>
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ position
Posiziona un elemento in posizione static, relative, absolute o fixed.
Valori possibili sono:
- static (Elemento posizionato secondo il flusso del documento. )
- relative (Sposta un elemento relativamente alla sua posizione normale,)
- absolute (Assoluta rispetto alla pagina)
- fixed
Esempio
#PosizioneFissa
{
position:absolute;
top:80px;
left:80px;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ vertical-align
Imposta l’allineamento verticale di un elemento.
Valori possibili sono:
- baseline (Elemento allineato alla linea base del genitore)
- sub (Allinea l’elemento come pedice)
- super (Apice)
- top (Il lato in alto dell’elemento è parallelo all’elemento più alto della riga)
- text-top (Il lato in alto dell’elemento è parallelo all’elemento carattere più alto della riga)
- middle (In mezzo all’elemento genitore)
- bottom (Il lato in basso dell’elemento è parallelo all’elemento più basso della riga)
- text-bottom (Il lato in basso dell’elemento è parallelo all’elemento carattere più basso della riga )
- lunghezza
- percentuale
<style>
.Apice {
vertical-align: super;
}
</style>
Dimostrazione di <span class="Apice">testo come apice
</span>
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ z-index
Imposta l’ordine degli elementi. Un elemento con un numero di ordine più grande sta sempre davanti ad un altro elemento con un ortine più basso.
Valori possibili sono:
- auto
- un numero
<style>
#PrimoPiano {
position: absolute;
top: 20px;
left: 20px;
height: 100px;
width: 100px;
background-color: yellow;
z-index: 100;
}
#SecondoPiano {
position: absolute;
top: 40px;
left: 40px;
height: 100px;
width: 100px;
background-color: red;
z-index: 99; /*un valore pił basso porta l'elemento in avanti*/
}
</style>
<div id="PrimoPiano"></div>
<div id="SecondoPiano"></div>
¤ Clicca qui per visualizzare la demo dell'esempio... ¤
