Posiciones CSS

La propiedad position

La propiedad position especifica el tipo de posición para una etiqueta. Hay cinco diferentes valores para la posición:

• static
• relative
• fixed
• absolute
• sticky

La propiedad position trabaja en combinación con las propiedades top, bottom, left y right. Sin embargo, estas propiedades no funcionarán a menos que sea especificada la propiedad position primero y su funcionamiento dependerá del tipo de position.

El valor static

El valor de posición predeterminado de las etiquetas HTML es static. Las etiquetas HTML con position: static; no les afecta los valores de las propiedades top, bottom, left y right. Una etiqueta HTML con position: static; no es posicionado en algún lugar en especial sino que es posicionado de acuerdo al flujo normal de la página.

div.estatico {
  position: static;
  border: 1px solid black;
}

El valor relative

Una etiqueta HTML con position: relative; es posicionado relativo a su posición normal.

div.relativo {
  position: relative;
  left: 30px;
  border: 1px solid black;
}

El valor fixed

Una etiqueta con position: fixed; es fijada con relación a la ventana del navegador web, lo que significa siempre permanece en el mismo lugar, incluso si la página es desplazada. Las propiedades top, bottom, left y right se utilizan para posicionar la etiqueta. Una etiqueta con posición fija no deja un espacio o hueco en la página donde normalmente se ubicaría, es decir, no es considerada por el flujo normal de la página.

div.fijo {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 1px solid black;
}

El valor absolute

Una etiqueta HTML con position: absolute; es posicionado con relación con la etiqueta HTML que la contiene (si está anidado). Sin embargo, si la etiqueta HTML que lo contiene no tiene posicionamiento o no está anidado a ninguna etiqueta HTML, se posiciona en relación de la etiqueta body (documento HTML) y se muevo con el desplazamiento de la página.

Nota: Una etiqueta con posicionamiento es aquella que su posición no es static.

div.absoluta {
  position: absolute;
  top: 60px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 1px solid black;
}

El valor sticky

Una etiqueta HTML con position: sticky; es posicionado de acuerdo al desplazamiento de la ventana. Este posicionamiento alterna entre un posicionamiento a relativo y fijado, dependiendo del desplazamiento de la ventana. Es posicionado como relativo hasta que queda fuera de vista con el desplazamiento de la ventana quedando pegada en un lugar fijo.

Nota: Navegadores antiguos no soportan el position: sticky;.

div.pegajoso {
  position: sticky;
  top: 0;
  background: green;
  border: 1px solid black;
}

La propiedad z-index

Cuando hay etiquetas posicionadas es posible que se sobrepongan a otras etiquetas. La propiedad z-index especifica el orden de apilamiento de una etiqueta posicionada, es decir, que etiqueta debe colocarse delante o detrás que se refleja cuando hay etiquetas que se sobreponen a otras. El valor de la propiedad z-index es un valor numérico entero, permitiéndose valores negativos. El valor mayor será visualizado al frente de las tengan valores menores.

img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

Nota: si dos elementos posicionados se superponen sin un z-index especificado, el elemento posicionado al final en el código HTML se mostrará en la parte superior.

La propiedad clip

La propiedad clip especifica un rectángulo para acortar una etiqueta HTML con posicionamiento absoluto. El rectángulo es especificado por cuatro coordenadas a partir de esquina superior izquierda de la etiqueta a recortar.

img {
  position: absolute;
  clip: rect(0px, 60px, 200px, 0px);
}

Nota: La propiedad clip no funciona si la etiqueta esta especificada como overflow: visible;.

Las propiedades de posición

Propiedad	Descripción
bottom	Especifica el borde inferior de una etiqueta posicionada.
clip	Acorta una etiqueta posicionada como absoluta.
left	Especifica el borde izquierdo de una etiqueta posicionada.
position	Especifica el tipo de posicionamiento para una etiqueta.
right	Especifica el borde derecho de una etiqueta posicionada.
top	Especifia el borde superior de una etiqueta posicionada.
z-index	Especifica el orden de apilamiento de una etiqueta.