Come posizionare oggetti

Come posizionare oggetti in CSS: la proprietà position specifica il tipo di metodo di posizionamento utilizzato per un elemento (statico, relativo, fisso o assoluto).

La proprietà Positon

La proprietà position specifica il tipo di metodo di posizionamento utilizzato per un elemento.

Esistono quattro valori di posizione diversi:

  • static
  • relative
  • fixed
  • absolute

Gli elementi vengono quindi posizionati utilizzando le proprietà top, bottom, left, e right.

Tuttavia, queste proprietà non funzionano a meno che la proprietà position non sia impostata prima.

Essi funzionano anche in modo diverso a seconda del valore di position.

position: static;

Per impostazione predefinita, gli elementi HTML vengono posizionati come static.

Gli elementi posizionati con static non sono influenzati dalle proprietà top, bottom, left, e right.

Un elemento di position: static; non è posizionato in alcun modo speciale; è sempre posizionato in base al flusso normale della pagina:

Esempio

Questo elemento <div> usa position: static;

Ecco il CSS utilizzato:

div.static {
position: static;
border: 3px solid #73AD21;
}

position: relative;

Un elemento con position: relative; è posizionato rispetto alla sua posizione normale.

L’impostazione delle proprietà top, bottom, left, e right di un elemento posizionato con relative determinerà la regolazione lontano dalla posizione normale. Altri contenuti non verranno regolati per adattarsi a qualsiasi ostacolo lasciato dall’elemento.

Esempio

Questo elemento <div> ha la posizione relative;

Ecco il CSS utilizzato:

div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}

position: fixed;

Un elemento con position: fixed; è posizionato rispetto alla visualizzazione, il che significa che rimane sempre nello stesso posto anche se si scorre la pagina. Le proprietà top, right, bottom e left vengono utilizzate per posizionare l’elemento.

Un elemento fisso non lascia uno spazio nella pagina in cui sarebbe stato normalmente collocato.

Esempio

Ecco il CSS utilizzato:

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}

position: absolute;

Un elemento con position: absolute; è posizionato rispetto all’elemento precedente più vicino (anziché posizionato rispetto alla vista, come fisso).

Però; Se un elemento posizionato absolute non dispone di elementi precedenti posizionati, utilizza il corpo del documento e si muove con lo scorrimento della pagina.

Nota: un elemento “posizionato” è quello la cui posizione è qualsiasi cosa tranne che “static”.

Esempio

Qui c’è un semplice esempio:

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
} 

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *