Posizionamento fisso in CSS

Ora analizzeremo il posizionamento fisso. È simile a quello assoluto, la differenza si manifesta in come questi tipi di posizionamento si comportano in presenza di una barra di scorrimento.

Durante lo scorrimento della pagina, gli elementi posizionati in modo assoluto scorreranno insieme alla pagina. Guarda l'esempio:

html<div id="elem"></div>
<div id="content">
  some long text
</div>

css#elem {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

#content {
  margin: 0 auto;
  width: 300px;
  text-align: justify;
  font: 16px Arial;
}

Результат:

Si può fare in modo che durante lo scorrimento della pagina l'elemento posizionato rimanga al suo posto. Per farlo, è necessario assegnargli un posizionamento fisso tramite la proprietà position con il valore fixed:

html<div id="elem"></div>
<div id="content">
  some long text
</div>

css#elem {
  position: fixed; /* impostiamo il posizionamento fisso */
  top: 30px;
  right: 30px;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

#content {
  margin: 0 auto;
  width: 300px;
  text-align: justify;
  font: 16px Arial;
}

Результат: