¿Cuál es la diferencia entre position Fixed y Sticky?
ฝัง
- เผยแพร่เมื่อ 12 ก.ย. 2024
- Decidí preparar este videíto para ayudarles a entender un poco mejor la diferencia entre position: fixed y position: sticky. Hay además un poquito de información sobre el funcionamiento de position: absolute.
Pequeño resumen:
• Fixed no ocupa espacio en nuestro sitio, y nos persigue desde el comienzo en la posición que le indicamos
• Sticky ocupa espacio en nuestro sitio, y nos persigue desde que llega a la posición que le indicamos
• Absolute toma su posición en referencia al padre más cercano con position: relative y, si no hay ninguno, al body
🔗 Links
✅ Archivos utilizados en el video: drive.google.c...
Redes
📷 / carpicoder
🐦 / carpicoder
🚀 / discord
👨🏽💻 github.com/car...
💼 / matiascoletta
Donaciones
🤙 carpicoder.com...
Contacto
✉️ hola@carpicoder.com
🌐 carpicoder.com
Gracias por esa buena explicación 😊
SUPER CLARO!!
Excelente muchas gracias¡¡¡
Muchas gracias!!! no he encontrado otro vídeo que lo explíque mejor!!!
❤️❤️❤️
Gracias!!!
Muy bueno!!!!!!!
Gracias Yani!! Mi fiel seguidora oculta jajaja 😝
increibleee , graciaas
💖
Hola Carpi,para hacer link desde una "option" dentro de una Selection,hacia un link derminado como ser una pagina propia u otra de la web,te consulto,se pued lograr con css solo sin js ?si tenes alguna forma no muy extensa, muchas gracias
Hola! Deberías usar JS realmente para algo así (que al hacer clic se despliegue el menú), y hacerlo con links y no con un elemento select!
Clarísimo 😁
Gracias por tu video, comprendi mejor algunas cosas, pero aun asi aplicando ciertos cambios no logro sostener el sticky.
Mi navbar se desplaza hacia abajo, cuando pasa los 60px de margin del contenedor que se va a encontar, luego desaparece.
En el html esta todo dentro del mismo padre. No comprendo que sucede
Hola! Eso puede tener dos razones:
1. El elemento con position sticky está adentro de otro elemento que termina ahí donde se te desaparece
2. Hay otro elemento sticky más abajo que toma su lugar
Si lo subís a un repo con deploy lo puedo revisar!
Hola Carpi tengo una duda para que un elemento tenga position: fixed y position: sticky el padre debe tener position: relative?
Hola Augusto, no! Los position fixed y sticky toman como referencia el viewport, y no ningún elemento padre!
Hola Carpi, hice un nav bar que se mantiene arriba en la pagina mientras scrolleas, ese nav bar tiene varias opciones que actúan como indice y al hacerle click encima te dirige titulo de la sección que elegiste. El problema que tengo es que cuando me lleva a esa parte de la pagina el nav bar tapa el titulo de la sección a la que me lleva, mi pregunta es si hay alguna forma de que se detenga justo antes de tapar el titulo?
Se puede solucionar dándole un padding a las secciones, para que tengan un espacio justo por encima y que el header no lo tape!
@@carpicoder Logré solucionarlo con eso, no es lo más lindo porque me deja un espacio en blanco de 5rem sobre cada título, pero de momento sirve. Gracias Carpi!
@@alfonso469 si le das un padding-top de 5rem, agregale un margin negativo de lo mismo a ver qué tal 👌🏼👌🏼
@@carpicoder ahora si quedo perfecto, muchísimas gracias!