Cual es entonces la mayor diferencia entre absolute, relative, fixed, sticky??? y como elegir entre ellas en diferentes situaciones?

Abdul Orlando Florez Lopez

Abdul Orlando Florez Lopez

Pregunta
studenthace 4 años

Cual es entonces la mayor diferencia entre absolute, relative, fixed, sticky??? y como elegir entre ellas en diferentes situaciones?

2 respuestas
para escribir tu comentario
    Jared Nava

    Jared Nava

    studenthace 4 años

    -Relative se parece a "static" reservando el espacio pero permitiéndote mover el contenedor. * -Absolute no reserva un espacio y te permite mover contenedores por tu pagina pero debe obedecer un "sistema de capas" conocido como "z-index" para que los objetos no queden sobre puestos. % -Fixed mantiene al contenedor fijado a cualquier espacio de la pantalla (supongo que con algo de javascript puede ser tu "boton" de ayuda) . -Sticky es una "combinacion" de relative y fixed. Si tienes informacion importante que debe estar en un sitio y no deseas un elemento superior (en este caso nav) seria recomendable usar sticky, si usaras fixed manteniedo la ubicacion de la promocion tendrias un espacio en negro, mientras que fixed puede ajustarse al borde de tu pagina . Untitled.png

    Patricio Villarroel Durán

    Patricio Villarroel Durán

    studenthace 4 años

    Hola Abdul

    A veces cuesta entenderlo bien si no es con práctica. Saber cómo funcionan te ayudará a decidir cuando estés maquetando "hey, necesito mi barra de navegación quede fija aunque se haga scroll, asi que usaré position: fixed".

    Pero puedes mirar más videos si necesitas ver más ejemplos. Explicarlo con texto es difícil, esto es muy visual. Puedes revisar este video.

Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]

Crea vistas web fluidas y eficientes con HTML, CSS y Flexbox. Aprende a estructurar layouts adaptables, desde mobile a desktop, optimizando imágenes y aplicando buenas prácticas semánticas y de accesibilidad.

Curso de HTML y CSS [Empieza Gratis]
Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]

Crea vistas web fluidas y eficientes con HTML, CSS y Flexbox. Aprende a estructurar layouts adaptables, desde mobile a desktop, optimizando imágenes y aplicando buenas prácticas semánticas y de accesibilidad.