La propiedad de posición CSS

Cómo trabajar con elpositionpropiedad en CSS

El posicionamiento es lo que nos hace determinar dónde aparecen los elementos en la pantalla y cómo aparecen.

Puede mover elementos y colocarlos exactamente donde desee.

En esta publicación también veré cómo cambian las cosas en una página en función de cómo los elementos con diferentespositionInteractuar el uno con el otro.

Tenemos una propiedad CSS principal:position.

Puede tener esos 5 valores:

  • static
  • relative
  • absolute
  • fixed
  • sticky

Posicionamiento estático

Este es el valor predeterminado para un elemento. Los elementos de posición estática se muestran en el flujo de página normal.

Posicionamiento relativo

Si ponesposition: relativeen un elemento, ahora puede colocarlo con un desplazamiento, utilizando las propiedades

  • cima
  • derecho
  • fondo
  • izquierda

que se llamanpropiedades de compensación. Aceptan un valor de longitud o un porcentaje.

Llevareste ejemplo lo hice en Codepen. Creo un contenedor principal, un contenedor secundario y un cuadro interno con algo de texto:

<div class="parent">
  <div class="child">
    <div class="box">
      <p>Test</p>
    </div>
  </div>
</div>

con algo de CSS para dar algunos colores y relleno, pero no afecta el posicionamiento:

.parent {
  background-color: #af47ff;
  padding: 30px;
  width: 300px;
}

.child { background-color: #ff4797; padding: 30px; }

.box { background-color: #f3ff47; padding: 30px; border: 2px dotted #333; font-family: courier; text-align: center; font-size: 2rem; }

aquí está el resultado:

Puede intentar agregar cualquiera de las propiedades que mencioné antes (top,right,bottom,left) a.boxy no pasará nada. La posición esstatic.

Ahora si nos ponemosposition: relativea la caja, al principio aparentemente nada cambia. Pero el elemento ahora puede moverse usando eltop,right,bottom,leftproperties, y ahora puede alterar su posición en relación con el elemento que lo contiene.

Por ejemplo:

.box {
  /* ... */
  position: relative;
  top: -60px;
}

Un valor negativo paratophará que la caja se mueva hacia arriba en relación con su contenedor.

O

.box {
  /* ... */
  position: relative;
  top: -60px;
  left: 180px;
}

Observe cómo el espacio que ocupa la caja permanece preservado en el contenedor, como si aún estuviera en su lugar.

Otra propiedad que ahora funcionará esz-indexpara alterar la ubicación del eje z. Hablaremos de eso más adelante.

Posicionamiento absoluto

Configuraciónposition: absoluteen un elemento lo eliminará del flujo del documento y ya no seguirá el flujo de posicionamiento de la página.

¿Recuerda que en el posicionamiento relativo notamos que el espacio originalmente ocupado por un elemento se conservaba incluso si se movía?

Con posicionamiento absoluto, en cuanto ponemosposition: absoluteen.box, su espacio original ahora está colapsado, y solo el origen (coordenadas x, y) permanece igual.

.box {
  /* ... */
  position: absolute;
}

Ahora podemos mover la caja como queramos, usando eltop,right,bottom,leftpropiedades:

.box {
  /* ... */
  position: absolute;
  top: 0px;
  left: 0px;
}

o

.box {
  /* ... */
  position: absolute;
  top: 140px;
  left: 50px;
}

Las coordenadas son relativas al contenedor más cercano que no esstatic.

Esto significa que si agregamosposition: relativehacia.childelemento, y establecemostopylefta 0, el cuadro no se colocará en el margen superior izquierdo delventana, sino que se colocará en las coordenadas 0, 0 de.child:

.child {
  /* ... */
  position: relative;
}

.box { /* … */ position: absolute; top: 0px; left: 0px; }

Así es (como ya vimos) de.childes estático (el predeterminado):

.child {
  /* ... */
  position: static;
}

.box { /* … */ position: absolute; top: 0px; left: 0px; }

Al igual que para el posicionamiento relativo, puede utilizarz-indexpara alterar la ubicación del eje z.

Posicionamiento fijo

Al igual que con el posicionamiento absoluto, cuando se asigna un elementoposition: fixedse elimina del flujo de la página.

La diferencia con el posicionamiento absoluto es la siguiente: los elementos ahora siempre se posicionan en relación con la ventana, en lugar del primer contenedor no estático.

.box {
  /* ... */
  position: fixed;
}

.box {
  /* ... */
  position: fixed;
  top: 0;
  left: 0;
}

Otra gran diferencia es que los elementos no se ven afectados por el desplazamiento. Una vez que coloca un elemento adhesivo en algún lugar, desplazarse por la página no lo elimina de la parte visible de la página.

Posicionamiento pegajoso

Si bien los valores anteriores han existido durante mucho tiempo, este se introdujo recientemente y todavía no es compatible (ver caniuse.com)

El componente iOS de UITableView es lo que me viene a la mente cuando pienso enposition: sticky. ¿Sabes cuándo te desplazas por la lista de contactos y la primera letra se pega en la parte superior para hacerte saber que estás viendo los contactos de esa letra en particular?

Usamos JavaScript para emular eso, pero este es el enfoque adoptado por CSS para permitirlo de forma nativa.

Descarga mi gratisManual de CSS


Más tutoriales de CSS: