Posicionamiento de elementos

Para posicionar un elemento en la pagina se puede usar los siguientes propiedades.

Los elementos se posicionan usando las propiedades: top, right, botton y left. Sin embargo, estas propiedades no funcionarán a menos que la propiedad position se establezca primero. También funcionan de manera diferente según el valor de la posición.

• Position
• Static
• Relative
• Fixed
• Absolute
• Sticky
• Posicionamiento
• Top
• Right
• Bottom
• Left
• Clip
• Clip-path
• z-index

1. Position

1.1 Static

Un elemento estático con position: static; no está posicionado de ninguna manera especial; siempre se posiciona de acuerdo con el flujo normal de la página.

Los elementos asi posicionados no se ven afectados por las propiedades: top, right, botton y left.

div.static {
   position: static;
   border: 3px solid red;
}

1.2. Relative

Un elemento relativo con position: relative; se coloca en relación con su posición normal.

Establecer las propiedades: top, right, botton y left de un elemento relativamente posicionado hará que se ajuste fuera de su posición normal. Otro contenido no se ajustará para encajar en ningún espacio dejado por el elemento.

div.relative {
   position: relative;
   left: 30px;
   border: 3px solid red;
}

1.3. Fixed

Un elemento fijo con position: fixed; se coloca con respecto a la ventana gráfica, lo que significa que siempre permanece en el mismo lugar incluso si se desplaza la página.

Las propiedades: top, right, botton y left se usan para posicionar el elemento.

Un elemento fijo no deja un espacio en la página donde normalmente se habría ubicado. Observe el elemento fijo en la esquina inferior derecha de la página.

div.fixed {
   position: fixed;
   bottom: 0;
   right: 0;
   width: 300px;
   border: 3px solid red;
}

1.4. Adsolute

Un elemento absoluto con position: absolute; se posiciona en relación con el ancestro posicionado más cercano (en lugar de posicionado en relación con la ventana gráfica, como fijo).

Sin embargo; si un elemento position: absolute; no tiene ancestros posicionados, usa el cuerpo del documento y se mueve junto con el desplazamiento de la página.

Un elemento "posicionado" es aquel cuya posición es cualquier cosa menos static.

div.relative {
   position: relative;
   width: 400px;
   height: 200px;
   border: 3px solid red;
}
div.absolute {
   position: absolute;
   top: 80px;
   right: 0;
   width: 200px;
   height: 100px;
   border: 3px solid navy;
}

1.5. Sticky

Un elemento adhesivo con position: sticky; se coloca en función de la posición de desplazamiento del usuario.

Un elemento adhesivo alterna entre relativey fixed, según la posición de desplazamiento. Se posiciona en relación hasta que se alcanza una posición de desplazamiento determinada en la ventana gráfica, luego se "pega" en su lugar (como posición: fija).

div.sticky {
   position: -webkit-sticky; /* Safari */
   position: sticky;
   top: 0;
   background-color: blue;
   border: 2px solid navy;
}

2. Otras posiciones

Las propiedades: top, right, bottom y left se usan para posicionar el elemento siempre que primero se defina la propiedad position: fija; o absoluta;.

2.1. Top

La propiedad top afecta la posición vertical de un elemento posicionado. Esta propiedad no tiene efecto en elementos no posicionados.

top: auto|tamaño|initial|inherit;

Condiciones de aplicacion:

Si posición: estática;

la propiedad top no tiene efecto.

Si posición: relativa;

la propiedad top hace que el borde superior del elemento se mueva por encima/debajo de su posición normal.

Si posición: fija; o absoluta;

la propiedad top establece el borde superior de un elemento en una unidad encima/debajo del borde superior de su antepasado posicionado más cercano.

Si posición: pegajosa;

la propiedad top se comporta como si su posición fuera relativa cuando el elemento está dentro de la ventana gráfica y como si su posición fuera fija cuando está fuera.

Establezca el borde superior del elemento posicionado 50px hacia abajo desde el borde superior de su antepasado posicionado más cercano.

div {
   position: absolute;
   top: 50px;
   border: 3px solid green;
}

Establezca el borde superior del elemento posicionado 20px hacia arriba desde el borde superior de su antepasado posicionado más cercano.

p {
   position: fixed;
   top: -20px;
   border: 3px solid blue;
}

2.2. Right

La propiedad right afecta la posición horizontal de un elemento posicionado. Esta propiedad no tiene efecto en elementos no posicionados.

right: auto|tamaño|initial|inherit;

Condiciones de aplicacion:

Si posición: estática;

la propiedad bottom no tiene efecto.

Si posición: relativa;

la propiedad bottom hace que el borde inferior del elemento se mueva por encima/debajo de su posición normal.

Si posición: fija; o absoluta;

la propiedad bottom establece el borde inferior de un elemento en una unidad encima/debajo del borde inferior de su antepasado posicionado más cercano.

Si posición: pegajosa;

la propiedad bottom se comporta como si su posición fuera relativa cuando el elemento está dentro de la ventana gráfica y como si su posición fuera fija cuando está fuera.

div.absolute {
   position: absolute;
   right: 150px;
   width: 200px;
   height: 120px;
   border: 3px solid green;
} 

2.3. Bottom

bottom: auto|tamaño|initial|inherit;

Condiciones de aplicacion:

Si posición: estática;

la propiedad bottom no tiene efecto.

Si posición: relativa;

la propiedad bottom hace que el borde inferior del elemento se mueva por encima/debajo de su posición normal.

Si posición: fija; o absoluta;

la propiedad bottom establece el borde inferior de un elemento en una unidad encima/debajo del borde inferior de su antepasado posicionado más cercano.

Si posición: pegajosa;

la propiedad bottom se comporta como si su posición fuera relativa cuando el elemento está dentro de la ventana gráfica y como si su posición fuera fija cuando está fuera.

div.absolute {
  position: absolute;
  bottom: 10px;
  width: 50%;
  border: 3px solid #8AC007;
}

2.4. Left

La propiedad left afecta la posición horizontal de un elemento posicionado. Esta propiedad no tiene efecto en elementos no posicionados.

left: auto|tamaño|initial|inherit;

Condiciones de aplicacion:

Si posición: estática;

la propiedad left no tiene efecto.

Si posición: relativa;

la propiedad left hace que el borde izquierdo del elemento se mueva por encima/debajo de su posición normal.

Si posición: fija; o absoluta;

la propiedad left establece el borde izquierdo de un elemento en una unidad encima/debajo del borde izquierdo de su antepasado posicionado más cercano.

Si posición: pegajosa;

la propiedad left se comporta como si su posición fuera relativa cuando el elemento está dentro de la ventana gráfica y como si su posición fuera fija cuando está fuera.

div {
  position: absolute;
  left: 150px;
  width: 200px;
  height: 120px;
  border: 3px solid green;
}

3. Clip

Qué sucede si una imagen es más grande que su elemento contenedor ? La propiedad clip le permite especificar un rectángulo para recortar un elemento posicionado absolutamente. El rectángulo se especifica como cuatro coordenadas, todas desde la esquina superior izquierda del elemento a recortar.

clip: auto|shape|initial|inherit;

Esta propiedad no funciona si la propiedad desbordamiento: visible;

Esta propiedad es reemplazada por clip-path

Recortar una imagen

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

4. Clip-path

La propiedad clip-path le permite recortar un elemento a una forma básica o a una fuente SVG.

Esta propiedad reemplaza a clip

Recorte una imagen en un círculo del 50%

img {
   clip-path: circle(50%);
}

5. z-index

La propiedad z-index especifica el orden de apilamiento de un elemento. Un elemento con un orden de pila mayor siempre está encima de un elemento con un orden de pila menor.

z-index: auto | numero | initial | inherit;

Solo funciona en elementos posicionados posición: relativa, fija o absoluta.

Establezca el índice z para una imagen.

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