position (proprietà CSS) imposta il tipo di posizionamento nella pagina dell’elemento HTML.
Sintassi
position: absolute|fixed|relative|static
| valore | descrizione |
|---|---|
| XXX | XXX |
Esempi
<style>
.relative_1 {
position: relative;
left: 50px;
border: 3px solid yellow;
}
.absolute_1 {
position: absolute;
left: 50px;
border: 3px solid yellow;
}
</style>
<p>Posizione naturale</p>
<div class="relative_1">Test4
<p class="absolute_1">Test4 bis</p>
</div>
Posizione naturale
Test4 bis
position: absolute
La proprietà position:absolute stabilisce la posizione dell’elemento a partire dalla posizione (relativa) dell’elemento suo immediato ascendente, in base alle ulteriori proprietà bottom, left, right e top.
<style>
.absolute_1 {
position: absolute;
bottom: 0;
right: 0;
border: 3px solid yellow;
}
</style>
<p class="absolute_1">Test3</p>
Test3
position: fixed
La proprietà position:fixed stabilisce la posizione dell’elemento in modo fisso nella pagina (cioè a prescindere dal suo scrolling), in base alle ulteriori proprietà bottom, left, right e top.
<style>
.fixed_1 {
position: fixed;
bottom: 0;
right: 0;
border: 3px solid yellow;
}
</style>
<p class="fixed_1">Test3</p>
Test3
(Risultato visibile in basso a destro nella pagina)
position: relative
La proprietà position:relative stabilisce la posizione dell’elemento a partire dalla sua posizione naturale (v. sopra), che costituisce riferimento della nuova, in base alle ulteriori proprietà bottom, left, right e top.
<style>
.relative_1 {
position: relative;
left: 50px;
border: 3px solid yellow;
}
</style>
<p>Posizione naturale</p>
<p class="relative_1">Test2</p>
Posizione naturale
Test2
position: static
La proprietà position:static stabilisce la posizione naturale dell’elemento, cioè secondo il normale flusso degli elementi della pagina così come costruiti nel codice sorgente.
<style>
.static_1 {
position: static;
border: 3px solid yellow;
}
</style>
<p class="static_1">Test1</p>
Test1
0 Comment