CSS - posición

Descripción

La propiedad de posición se utiliza para colocar un elemento. Se puede utilizar junto con las propiedades superior, derecha, inferior e izquierda para colocar un elemento donde lo desee.

Valores posibles

static - El cuadro de elementos se presenta como parte del flujo normal de documentos, siguiendo al elemento anterior y precediendo a los elementos siguientes.
relative - La caja del elemento se coloca como parte del flujo normal y luego se compensa en cierta distancia.
absolute - La caja del elemento se coloca en relación con su bloque contenedor y se elimina por completo del flujo normal del documento.
fixed- El cuadro element.s está absolutamente posicionado, con todos los comportamientos que se describen para position: absolute. La principal diferencia es que el bloque contenedor de un elemento de posición fija es siempre la ventana gráfica.

Sintaxis DOM

object.style.position = "static";

Se aplica a

Todos los elementos HTML.

Ejemplo

Aquí está el ejemplo:

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

Producirá el siguiente resultado:

↰ Previous page