CSS - Posizionamento

CSS ti aiuta a posizionare il tuo elemento HTML. Puoi inserire qualsiasi elemento HTML in qualsiasi posizione desideri. È possibile specificare se si desidera che l'elemento sia posizionato rispetto alla sua posizione naturale nella pagina o assoluto in base al suo elemento padre.

Ora vedremo tutte le proprietà relative al posizionamento CSS con esempi:

Posizionamento relativo

Il posizionamento relativo cambia la posizione dell'elemento HTML rispetto a dove appare normalmente. Quindi "sinistra: 20" aggiunge 20 pixel alla posizione SINISTRA dell'elemento.

È possibile utilizzare due valori in alto e a sinistra insieme alla proprietà position per spostare un elemento HTML ovunque nel documento HTML.

  • Sposta a sinistra: utilizza un valore negativo per la sinistra .
  • Sposta a destra: utilizza un valore positivo per la sinistra .
  • Sposta su: utilizza un valore negativo per la parte superiore .
  • Sposta in basso: utilizza un valore positivo per la parte superiore .

NOTE- È possibile utilizzare anche i valori in basso o a destra allo stesso modo in alto e a sinistra .

Ecco l'esempio:

<html>
   <head>
   </head>

   <body>
      <div style = "position:relative; left:80px; top:2px; background-color:yellow;">
         This div has relative positioning.
      </div>
   </body>
</html>

Produrrà il seguente risultato:

Posizionamento assoluto

Un elemento con position: absolute è posizionato alle coordinate specificate rispetto all'angolo superiore sinistro dello schermo.

È possibile utilizzare due valori in alto e a sinistra insieme alla proprietà position per spostare un elemento HTML ovunque nel documento HTML.

  • Sposta a sinistra: utilizza un valore negativo per la sinistra .
  • Sposta a destra: utilizza un valore positivo per la sinistra .
  • Sposta su: utilizza un valore negativo per la parte superiore .
  • Sposta in basso: utilizza un valore positivo per la parte superiore .

NOTE- È possibile utilizzare anche i valori in basso o a destra allo stesso modo in alto e a sinistra.

Ecco un esempio:

<html>
   <head>
   </head>

   <body>
      <div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
         This div has absolute positioning.
      </div>
   </body>
</html>

Posizionamento fisso

Il posizionamento fisso consente di fissare la posizione di un elemento in un punto particolare della pagina, indipendentemente dallo scorrimento. Le coordinate specificate saranno relative alla finestra del browser.

È possibile utilizzare due valori in alto e a sinistra insieme alla proprietà position per spostare un elemento HTML ovunque nel documento HTML.

  • Sposta a sinistra: utilizza un valore negativo per la sinistra .
  • Sposta a destra: utilizza un valore positivo per la sinistra .
  • Sposta su: utilizza un valore negativo per la parte superiore .
  • Sposta in basso: utilizza un valore positivo per la parte superiore .

NOTE- È possibile utilizzare anche i valori in basso o a destra allo stesso modo in alto e a sinistra .

Ecco un esempio:

<html>
   <head>
   </head>

   <body>
      <div style = "position:fixed; left:80px; top:20px; background-color:yellow;">
         This div has fixed positioning.
      </div>
   </body>
</html>