CSS - posizione

Descrizione

La proprietà position viene utilizzata per posizionare un elemento. Può essere utilizzato insieme alle proprietà top, right, bottom e left per posizionare un elemento dove lo desideri.

Possibili valori

  • static - Il riquadro degli elementi è disposto come parte del normale flusso del documento, seguendo l'elemento precedente e gli elementi precedenti precedenti.

  • relative - La scatola dell'elemento è disposta come parte del flusso normale e quindi sfalsata di una certa distanza.

  • absolute - La scatola dell'elemento è disposta rispetto al suo blocco contenitore, ed è completamente rimossa dal normale flusso del documento.

  • fixed- Il box element.s è posizionato in modo assoluto, con tutti i comportamenti descritti per la posizione: assoluto. La differenza principale è che il blocco contenitore di un elemento a posizione fissa è sempre il riquadro di visualizzazione.

Sintassi DOM

object.style.position = "static";

Si applica a

Tutti gli elementi HTML.

Esempio

Ecco l'esempio:

<html>
   <head>
      <style type = "text/css">
         img#lead {position: absolute;}
         div.top {position: fixed; top: 0; height: 10% width: 100%;}
         sup {position: relative; bottom: 0.66em;}
      </style>
   </head>

   <body>
      <img src = "/css/images/bullet.gif">
      <div>Tutorialspoint.com</div>
      <p>This text contains <sup>superscript</sup> text.</p>
   </body>
</html>

Produrrà il seguente risultato: