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:

html<div id="elem1"></div>
<div id="elem2"></div>

css#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:

html<div id="elem1"></div>
<div id="elem2"></div>

css#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:

html<div id="elem1"></div>
<div id="elem2"></div>

css#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:

html<div id="elem1"></div>
<div id="elem2"></div>

css#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:

html<div id="elem1"></div>
<div id="elem2"></div>

css#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

html<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text

css#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;
}