33

¿Problemas con position en CSS? Te tengo la solución

Te ha pasado que navegas por internet y de repente ¡boom! Encuentras una página increíble. Entonces sientes la necesidad de saber cómo construir algo así. Si la respuesta es sí, eres de los míos. Hoy quiero ayudarte a mejorar tus skills para que construyas la página de tus sueños. Así que ¡anímate! Y sigue leyendo.

Position ¿qué es?

Todos los elementos de un archivo HTML tienen un valor de position static por defecto, el cual no representa ningún cambio para el mismo. Pero al utilizar la propiedad position en CSS podemos cambiar el valor static y modificar la ubicación de nuestros elementos en el DOM. Puede adquirir ciertos valores como lo son:

  • Relative

  • Absolute

  • Fixed

  • Sticky

Entonces, si tú quieres que un elemento tenga una posición absoluta, solo tienes que agregar la siguiente línea de código.

.Mi_elemento { position: absolute}

Puedes hacer esto con todos los valores de position. Pero esto es solo la punta del iceberg.

Existen otras propiedades que se desbloquean (por decirlo de alguna forma) al agregar la propiedad position a un elemento. Estas otras propiedades son top, bottom, right, left y z-índex. No surten efecto sobre un elemento con position static.

Se usan para desplazar al elemento según sea el caso. Es decir, si utilizamos en CSS la siguiente sentencia:

.Mi_elemento {
  position: relative;
  top: 100px;
 }

Esto nos indica que el elemento va a tomar como referencia su posición actual y a partir de allí se va a desplazar desde su top 100 píxeles.

También tenemos z-index

Esta propiedad es análoga al concepto de capas en los programas de diseño. En primera instancia, todos los elementos de tu proyecto se encuentran en el mismo nivel o en la misma capa.

Con z-index puedes establecer si un elemento se posiciona por encima o debajo de otro. Por defecto, el z-índex de un elemento es cero. Basta con igualar la propiedad a un número para que adquiera ese número como capa o nivel.

.Mi_elemento {
  position: relative;
  top: 100px;
  z-index: 1;
 }

Puede resultar un poco confuso al principio, pero al entenderlo podrás darle a tus diseños efectos increíbles.

¿Aún no lo entiendes muy bien? ¡Hagamos unos ejemplos!

Construí un pequeño HTML para que puedas visualizarlo mejor. Como puedes ver, la estructura es muy simple. Solo tiene un título, una sección con 3 div y algunos estilos.

<body><h1class="Header_Title--design">¡Ejemplos de positions!</h1><sectionclass="Section_Padre--container"><divclass="Bloque_Hijo--uno">1</div><divclass="Bloque_Hijo--dos">2</div><divclass="Bloque_Hijo--tres">3</div></section></body>
1.png

Para el CSS nos enfocaremos en el comportamiento de los 3 cuadrados enumerados. En primera instancia, no poseen ningún position establecido, como se muestra a continuación.

.Bloque_Hijo--uno {}
.Bloque_Hijo--dos {}
.Bloque_Hijo--tres {} 

Position: relative

Relative te permite posicionar el elemento con respecto a sí mismo. No toma en cuenta ningún otro elemento del HTML para posicionarse.

Ejemplo

.Bloque_Hijo--uno {
   top: 100px;
}

.Bloque_Hijo--dos {
   position: relative;
   top: 100px;
}

.Bloque_Hijo--tres {
   position: relative;
   right: 60px;
   bottom: 40px;
}

2.png

Puedes observar que el Bloque 1 no se desplaza, esto ocurre porque su position es static. Por otro lado, el bloque 2 y el 3 si se desplazan. Lo hacen con respecto a su posición original usando los valores top, bottom y right.

Position: absolute

Los elementos con position absolute se ubican con respecto al elemento relativo padre más cercano. Si no defines ningún elemento relativo en tu CSS, el elemento absoluto se ubicara con respecto al último ancestro de tu archivo HTML.

Ejemplo

.Bloque_Hijo--uno {}

.Bloque_Hijo--dos {
   position: absolute;
   top: 0;
 }

.Bloque_Hijo--tres {} 

3.png

Al no determinar ningún elemento relativo, el bloque 2 se posiciona con respecto al body. ¿Qué sucede si determinamos un elemento relativo? Pues veamos.

.Section_Padre--container {
  position: relative;
 }

.Bloque_Hijo--uno {}

.Bloque_Hijo--dos {
  position: absolute;
  top: 0;
 }

.Bloque_Hijo--tres {} 

4.png

Se cumple que el elemento absoluto se posiciona con respecto al elemento relativo más cercano. Que en este caso es el elemento ”Section_Padre–container”.

Position: fixed

Con la propiedad fixed, el elemento se ubica con respecto al viewport y se mantendrá fijo en su posición mientras el usuario se desplaza dentro de la página.

Ejemplo

.Bloque_Hijo--uno {}

.Bloque_Hijo--dos {
  position: fixed;
  top: 0px;
}

.Bloque_Hijo--tres {} 

Position: sticky

Sticky tiene una funcionalidad similar al fixed. La diferencia es que permanece en su lugar hasta que se hace scroll y es alcanzado. A partir de allí se mantiene fijo en un lugar designado por la propiedad top, hasta que se haga scroll contrario.

Siempre debe usarse en conjunto con la propiedad top para que funcione.

Ejemplo

.Bloque_Hijo--uno {}

.Bloque_Hijo--dos {
  position: sticky;
  top: 0px;
}

.Bloque_Hijo--tres {} 

¡Listo! Ya sabemos utilizar correctamente position. Ahora solo debemos hacer un ejemplo más para mostrarte cómo funciona el z-index.

Z-index

Como te mencioné antes, no funciona con position static y posiciona los elementos en otros niveles o capas.

Ejemplo

.Bloque_Hijo--uno {
  position: relative;
  z-index: -1;
}
.Bloque_Hijo--dos {
  position: relative;
  top: 20px;
  left: 30px;
}
.Bloque_Hijo--tres {
  position: relative;
  z-index: 1;
  right: 0px;
  bottom: 100px;
}

5.png

Cada bloque tiene una posición relativa, así como un z-index diferente. Puedes ver como el bloque 1 esta debajo del contenedor. A su vez, el bloque 2 y el contenedor estan por debajo del bloque 3.

Cada bloque se encuentra en un nivel o capa diferente, donde no interactúan con los elementos de otros niveles.

Ahora es tú turno de hacer los ejemplos

¡Felicidades! Si llegaste hasta aquí significa que sabes usar correctamente los position. ¡Wohoo! Pero la cosa no acaba aquí.

Si te interesa el mundo del frontend ¡debes ingresar ya! Al Curso de Frontend Developer de la Escuela de JavaScript.

Allí aprenderás todas las herramientas para mejorar tus skills y comenzar desde cero un increíble proyecto. ¡Como todo un profesional! ¡Anímate!

Si tienes dudas con algún elemento de position, deja un comentario en este post y con gusto te ayudaré a resolverlo.

Nunca pares de aprender ❤️

Escribe tu comentario
+ 2
Ordenar por:
5
8319Puntos

Gracia si por la publicación.
Ahora entiendo cómo hacen que los iconos de compartir en los posts se muevan y se queden fijos con sticky 🤗

2
12738Puntos
2 años

Exactamente. A mí me sorprendió que se hicieran tan fácil. Antes se usaba JavaScript. Pero los position hicieron que fuera mucho más fácil.

1
1377Puntos
2 meses

Muy buen post, me sirvió muchisimo!

3
12819Puntos

Graciasss, necesitaba esto, tenía la duda de cómo usar position. ¡Ahora lo tengo clarísimo!

1
12738Puntos
2 años

¡Excelente! Que bueno que te sirvió, ahora nos toca practicar 💚

2
3212Puntos

Excelente Articulo sobre position en css. A veces suele ser un dolor de cabeza utilizar esta propiedad. Bastante claro los ejemplos y en que momento debemos usarlos.

1
12738Puntos
2 años

Que gusto que te sirviera el artículo 😃 Ahora solo queda practicar para que no hayan dolores de cabeza 💪

2
24348Puntos

Gracias por el aporte, practicando estos nuevos temas nos convertiremos en expertos!!!

1
12738Puntos
2 años

¡Claro que sii! Todos unos ninjas del frontend 🤩

2
7689Puntos

Muy bueno el post, se entiende muy bien! 👌

1
12738Puntos
2 años

¡Gracias! es un gusto muy grande saber qué le fue útil a alguien. 😃

2
6421Puntos

Excelente explicación. muchas gracias.

1
12738Puntos
2 años

Muchas gracias Linda😀 que bueno que te sirvió

2
41376Puntos

Gracias por compartir! Nada más un aporte sobre

position: relative

Tu indicas que “No toma en cuenta ningún otro elemento del HTML para posicionarse” pero si lo hace ya que se posiciona de acuerdo al padre.

Saludos!

4
12738Puntos
2 años

¡Hola! 😃 Gracias por comentar. Revisé lo que me planteas y creo que hay una pequeña confusión.

Así que hice 3 ejemplos adicionales para ilustrarlo.
positions; (1).png

Cuando menciono que “No toma en cuenta ningún otro elemento del HTML para posicionarse”, me refiero a que una vez ubicado en el HTML (en este caso dentro de ese contenedor) al usar relative; toma la posición que tiene en ese momento y a partir de allí se puede mover con top, bottom, right y left. Esto lo hace sin tomar en cuenta los elementos de su entorno. Solo su propia posición.

Como puedes ver, en el caso 3 de la imagen, el bloque 2 tiene un top 0. Sin embargo, como su position es relative y su top inicia desde sí mismo, no cambia de posición (puesto a que ya esta en top 0). Si se posicionara con respecto al contenedor, entonces se ubicaría en el borde superior del contenedor (como en el ejemplo de absolute).

En el caso 1 y 2 puedes visualizar esa linea imaginaria que se crea como referencia de la posicion original del elemento. Seria como el espacio original el cual tomará de referencia para desplazarse.

El position que si se posiciona con respecto al padre, en el position absolute. Siempre que el elemento padre tenga un position relative

Espero que así se entienda un poquito mejor ❤️

1
35089Puntos

Muchas gracias, justo ahora necesitaba repasar este tema.

slds.

1
7721Puntos

Gracias @mariwrios, lo entendí muy bien, me sirvió muchísimo. Ahora ya entiendo como puedo diseñar dibujos con css (pokemon) 😃

Captura.PNG

Solo una precisión, en el position: sticky no solo puede indicarse el top, sino también bottom, right y left.

Gracias este gran apoyo en la comunidad 😉

1
4982Puntos

Buen tutorial. Acabo de ver tu website. Es lo que podríamos decir algo conciso y resumido y aún así lleno de detalles.
Éxitos.

1
13182Puntos

Gracias! Bastante ilustrativo 🤩