5
respuestas

[Duda] posicionamiento

Hola, no entiendo la diferencia entre estos:

- position: absolute;
- position: relative;
- position: static;
5 respuestas

Hola Juan! te dejo este link que me sirvio para entenderlo a mi tambien:

https://developer.mozilla.org/es/docs/Web/CSS/position

Ojala te ayude!

Juan, buenos días, los tres valores que mencionaste: absolute, relative y static, representan diferentes formas en las que un elemento puede ser posicionado con respecto a su contenedor o a otros elementos en una página web.

  • position: static;: Es el valor predeterminado donde el elemento sigue el flujo normal de la página y se coloca según el orden en el HTML. Imaginate que estas acomodando las cosas en tu pieza, es como colocar tus cosas en orden, una después de otra, tal como aparecen en tu lista mental. Nada se sale de su lugar normal.

  • position: relative;: El elemento se posiciona con respecto a su posición original, pero aún ocupa espacio en el flujo normal del documento. Puedes desplazarlo usando top, right, bottom, y left. Siguiendo con el ejemplo, si decidís mover algo desde su posición original, las otras cosas aún saben dónde deberían estar, pero puedes desplazar ese elemento.

  • position: absolute;: El elemento se coloca fuera del flujo normal y se posiciona con respecto a su primer ancestro posicionado o al elemento de nivel superior. Podes usar top, right, bottom, y left para controlar su posición. Este es como tomar algo y ponerlo en una esquina específica de la habitación, independientemente de dónde estén otras cosas. No afecta a las demás, y está fijo en ese lugar específico.

Espero haberte ayudado a aclarar las diferencias.

Saludos,

Yesica.

Gracias por la explicación Yesica, quedo más claro :) Bonita tarde.

Qué buen ejemplo Yesica, gracias por la explicación.

Gracias Yésica, esta explicación me ayuda a entender la lógica del posicionamiento.