Propiedad CSS position

La propiedad CSS position controla cómo se coloca un elemento en el documento y cómo responde a las propiedades de desplazamiento top, right, bottom y left. Es una de las propiedades más importantes para construir elementos de interfaz en capas, fijos o flotantes.

Esta propiedad acepta cinco valores principales:

static — el valor por defecto; el elemento permanece en el flujo normal del documento.
relative — el elemento conserva su espacio en el flujo, pero puede desplazarse con las propiedades de offset.
absolute — el elemento se extrae del flujo y se posiciona respecto a su ancestro posicionado más cercano.
fixed — el elemento se extrae del flujo y se posiciona respecto al viewport.
sticky — el elemento alterna entre relative y fixed al desplazarse por la página.

Esta página explica cuándo usar cada valor, las reglas que rigen los offsets y los bloques contenedores, y los errores comunes que suelen confundir a los desarrolladores.

Cómo funcionan los offsets y los bloques contenedores

Las propiedades de desplazamiento top, right, bottom y left solo tienen efecto en elementos posicionados, es decir, cualquier elemento cuya position no sea static. En un elemento static se ignoran.

El punto de referencia de cada offset depende del valor:

relative — los offsets se miden desde la posición normal propia del elemento. top y bottom lo desplazan verticalmente; left y right lo desplazan horizontalmente. El espacio que ocupaba originalmente se conserva, por lo que el contenido circundante no se mueve.
absolute — los offsets se miden desde los bordes del bloque contenedor: el ancestro más cercano que sea él mismo posicionado (relative, absolute, fixed o sticky). Si no existe dicho ancestro, los offsets son relativos al bloque contenedor inicial (aproximadamente el elemento <html> / la página).
fixed — los offsets se miden desde el viewport, de modo que el elemento permanece en su lugar mientras la página se desplaza.
sticky — los offsets definen un umbral; el elemento se comporta como relative hasta que se supera ese umbral al hacer scroll, momento en que queda fijo como fixed dentro de su contenedor de desplazamiento.

Un error frecuente es esperar que un hijo con absolute se alinee con su padre sin establecer position: relative (o cualquier valor no estático) en ese padre. Añadir position: relative al padre — incluso sin offsets — lo convierte en el bloque contenedor. Este patrón de "padre relativo, hijo absoluto" es la base de la mayoría de los diseños posicionados.

Valor inicial	static
Se aplica a	Todos los elementos.
Se hereda	No.
Animable	No.
Versión	CSS2
Sintaxis DOM	Object.style.position = "sticky";

Sintaxis

Sintaxis de CSS position

position: static | absolute | fixed | relative | sticky | initial | inherit;

Un ejemplo sencillo con absolute

Aquí position: absolute extrae el párrafo del flujo y lo coloca a 40px de la izquierda y 120px desde la parte superior de la página (no existe un ancestro posicionado, por lo que la página es la referencia):

Ejemplo de código CSS position

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        position: absolute;
        left: 40px;
        top: 120px;
      }
    </style>
  </head>
  <body>
    <h2>Position property example</h2>
    <p>Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Ejemplo de la propiedad position con todos los valores:

Ejemplo de CSS position con todos los valores

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #box1 {
        position: static;
        border: 2px solid #666;
        width: 300px;
        height: 100px;
      }
      #box2 {
        position: absolute;
        border: 2px solid #8ebf42;
        top: 70px;
        right: 15px;
      }
      #box3 {
        position: relative;
        border: 2px solid #666;
        width: 300px;
        height: 100px;
      }
      #box4 {
        position: absolute;
        border: 2px solid #8ebf42;
        top: 70px;
        right: 15px;
      }
      #box5 {
        position: absolute;
        border: 2px solid #666;
        width: 320px;
        height: 100px;
        top: 750px;
        right: 25px;
      }
      #box6 {
        position: absolute;
        border: 2px solid #8ebf42;
        top: 70px;
        right: 15px;
      }
      #box7 {
        position: fixed;
        border: 2px solid #8ebf42;
        background-color: #eee;
        width: 300px;
        height: 100px;
        bottom: 0;
        left: 0;
        right: 0;
      }
      #box8 {
        position: absolute;
        border: 2px solid #666;
        top: 70px;
        right: 15px;
      }
    </style>
  </head>
  <body>
    <h2>Position property example</h2>
    <h3>Position: static</h3>
    <p>
      The Box1 element remains in the natural flow of the page and does not act as anchor point for the absolutely positioned Box2 element:
    </p>
    <div id="box1">
      Box1: position: static.
      <div id="box2">Box2: position: absolute, right: 15px, top: 70px</div>
    </div>
    <h3>Position: relative</h3>
    <p>
      The Box3 element remains in the natural flow of the page and also acts as anchor point for the absolutely positioned Box4 element:
    </p>
    <div id="box3">
      Box3: position: relative.
      <div id="box4">Box4: position: absolute, right: 15px, top: 70px</div>
    </div>
    <h3>Position: absolute</h3>
    <p>
      The Box5 element does not remain in the natural flow of the page. It positions itself according to the closest positioned ancestor and also acts as anchor point for the absolutely positioned Box6 element:
    </p>
    <div id="box5">
      Box5: position: absolute, top: 750px, right: 15px.
      <div id="box6">Box6: position: absolute, right: 15px, top: 70px</div>
    </div>
    <h3>Position: fixed</h3>
    <p>
      The Box7 element does not remain in the natural flow of the page and positions itself according to the viewport and acts as anchor point for the absolutely positioned Box8 element:
    </p>
    <div id="box7">
      Box7: position: fixed, bottom: 0, left: 0, right: 0.
      <div id="box8">Box8: position: absolute, right: 15px, top: 70px</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

En este ejemplo, box1 (static) y box3 (relative) permanecen en el flujo normal, pero solo box3 actúa como bloque contenedor para su hijo con posición absoluta, porque relative lo convierte en un ancestro posicionado mientras que static no lo hace. box5 y box7 se extraen del flujo y se posicionan respecto a la página y al viewport respectivamente.

Posicionamiento sticky

Un elemento sticky se desplaza con normalidad hasta que alcanza el offset especificado (en este caso top: 1px), y entonces queda "pegado" dentro de su contenedor de desplazamiento. Es ideal para encabezados de tabla, etiquetas de sección y barras de herramientas que deben permanecer visibles mientras su sección está en pantalla. Ten en cuenta que el posicionamiento sticky solo funciona mientras el ancestro con scroll del elemento se está desplazando, y ese ancestro no debe tener overflow: hidden que lo recorte.

Ejemplo de la propiedad position con el valor "sticky":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        height: 150px;
        overflow: auto;
        position: relative;
        background-color: #cccccc;
        padding: 0;
      }
      ul li {
        list-style-type: none;
        height: 30px;
        padding: 10px 10px 0;
      }
      ul li:first-child {
        position: -webkit-sticky;
        position: sticky;
        top: 1px;
        background-color: #dddddd;
      }
    </style>
  </head>
  <body>
    <h2>Example of the position property with the "sticky" value:</h2>
    <ul>
      <li>Sticky List Item</li>
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>List Item 3</li>
      <li>List Item 4</li>
      <li>List Item 5</li>
      <li>List Item 6</li>
      <li>List Item 7</li>
      <li>List Item 8</li>
      <li>List Item 9</li>
    </ul>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción	Pruébalo
static	Los elementos se colocan según el flujo normal del documento. Este es el valor por defecto de esta propiedad.	Pruébalo »
absolute	Los elementos se extraen del flujo del documento y se posicionan respecto a su elemento ancestro posicionado.	Pruébalo »
fixed	Los elementos se extraen del flujo del documento y se posicionan respecto a la ventana del navegador.	Pruébalo »
relative	El elemento se coloca respecto a su posición normal; las propiedades de offset lo desplazan sin eliminar su espacio original.	Pruébalo »
sticky	Los elementos se posicionan según el flujo normal del documento y luego se desplazan respecto a su ancestro de desplazamiento más cercano y al bloque contenedor.
initial	Hace que la propiedad use su valor por defecto.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Cuándo usar cada valor

static — déjalo como está para el contenido normal del documento. Rara vez se establece static de forma explícita, salvo para restablecer una regla de posicionamiento.
relative — para hacer pequeños ajustes visuales o, más habitualmente, para convertir un elemento en el bloque contenedor de un hijo absolute sin sacarlo del flujo.
absolute — para superposiciones, insignias, tooltips y menús desplegables que deben colocarse con precisión dentro de un padre relative.
fixed — para elementos anclados al viewport: encabezados fijos que nunca se mueven, botones "volver arriba", banners de cookies y modales.
sticky — para encabezados o etiquetas que deben desplazarse con el contenido hasta cierto punto y luego permanecer visibles.

Cuando los elementos posicionados se superponen, su orden de profundidad se controla con la propiedad z-index. El posicionamiento también se combina habitualmente con float, display y overflow al construir diseños.

Cómo funcionan los offsets y los bloques contenedores

Sintaxis

Un ejemplo sencillo con absolute

Resultado

Ejemplo de la propiedad position con todos los valores:

Posicionamiento sticky

Ejemplo de la propiedad position con el valor "sticky":

Valores

Cuándo usar cada valor

Práctica