Posizionamento relativo degli elementi in CSS
Il posizionamento relativo viene impostato con
il valore relative per la proprietà
position. Questo tipo di posizionamento permette
di spostare gli elementi rispetto alla loro posizione
attuale di una determinata quantità. Tuttavia,
tutti gli altri elementi della pagina considereranno
che l'elemento si trovi dove era originariamente.
Cioè, con questo tipo di posizionamento, l'elemento
non esce dal flusso normale.
Gli spostamenti dalla posizione corrente sono impostati dalle proprietà
top, right, bottom e
left.
Esempio
Per iniziare, creiamo semplicemente due blocchi senza posizionamento:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Esempio
Aggiungiamo ora relative al primo blocco.
Per il momento non cambierà nulla, poiché
non abbiamo specificato lo spostamento del blocco:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
position: relative;
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Esempio
Ora spostiamo il nostro blocco di 30px
dall'alto, specificando la proprietà top. In questo
caso, tutti gli altri elementi si comporteranno
come se il nostro blocco fosse rimasto nel punto
in cui era originariamente:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
position: relative;
top: 30px;
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Esempio
Spostiamo anche il nostro blocco di 40px
da sinistra, specificando la proprietà left:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
position: relative;
top: 30px;
left: 40px;
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Esempio
I valori negativi delle proprietà top, right,
bottom e left spostano nella direzione opposta.
Ad esempio, un valore positivo di
top sposta verso il basso, mentre uno negativo verso l'alto.
Spostiamo il nostro secondo blocco di 40px
verso l'alto, specificando un valore negativo
per la proprietà top:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
position: relative;
top: -40px;
left: 20px;
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Compiti pratici
Sono dati i seguenti blocchi:
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text
#elem1 {
width: 100px;
height: 100px;
margin-bottom: 20px;
background-color: #FF8888;
}
#elem2 {
width: 100px;
height: 100px;
margin-bottom: 20px;
background-color: #7E89EB;
}
#elem3 {
width: 100px;
height: 100px;
margin-bottom: 20px;
background-color: #4DEE99;
}
:
Sposta questi blocchi utilizzando il posizionamento relativo nel modo seguente:
