Significado de las propiedades top, bottom, left, right de css

Significado de las propiedades top, bottom, left, right de css

5
(2)

Las propiedades top, bottom, right y left de css sirven para desplazar una caja que tiene un posicionamiento absoluto, relativo, fijo o sticky.

Si te interesa repasarlos tal vez te pueda interesar esta lectura.

En este resumen se muestra visualmente como se desplaza una caja en función del valor positivo o negativo que le demos a cada una de las propiedades anteriores.

Propiedad top

Si tomamos como referencia la línea horizontal superior:

  • un top positivo desplaza la caja hacia abajo.
  • un top negativo desplaza la caja hacia arriba.
Significado de las propiedades top, bottom, left, right de css 1
Significado de las propiedades top, bottom, left, right de css 2

Propiedad bottom

Si tomamos como referencia la línea horizontal inferior:

  • un bottom positivo desplaza la caja hacia arriba.
  • un bottom negativo desplaza la caja hacia abajo.
Significado de las propiedades top, bottom, left, right de css 3
Significado de las propiedades top, bottom, left, right de css 4

Propiedad left

Si tomamos como referencia la línea vertical izquierda:

  • un left positivo desplaza la caja hacia la derecha.
  • un left negativo desplaza la caja hacia la izquierda.
Significado de las propiedades top, bottom, left, right de css 5
Significado de las propiedades top, bottom, left, right de css 6

Propiedad right

Si tomamos como referencia la línea vertical derecha:

  • un right positivo desplaza la caja hacia la izquierda.
  • un right negativo desplaza la caja hacia la derecha.
Significado de las propiedades top, bottom, left, right de css 7
Significado de las propiedades top, bottom, left, right de css 8

¡Hola!

Querido lector,

El truco para recordar como se comporta cada propiedad es tomar como referencia el lado superior, inferior, izquierdo o derecho y desde estos desplazar positivamente o negativamente la caja.

Si se desplaza hacia el interior de la caja externa (en negro) el desplazamiento es positivo. Si se desplaza hacia fuera de la caja externa (en negro) el desplazamiento es negativo.

Así es como lo hago para recordarlo yo.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 5 / 5. Votos: 2

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

¿Dónde he fallado?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No Comments

Post A Comment