Tuve que ver el video dos veces y repetir algunas partes y también hice mi propio ejercicio con foto de gato y todo, y finalmente me quedó muy claro, lo cual me produce un bienestar. Gracias.
hace poco vi tu video donde decias que dejaste tu trabajo y mencionabas que en tus videos tratas de dar la información correcta y verificas que todo este en orden, con este video me queda claro de que es verdad, explicaste algo que no explican en otros tutoriales que vi. Si no hubieses mencionado razones por las que no funciona o como su funcionamiento depende de la caja padre, jamas lo hubiese sabido hasta que me pasara el error. Me suscribí y con gusto, vere tus tutoriales porque se nota la calidad con los pocos que vi, muchas gracias por compartir tu conocimiento y sobre todo preocuparte por que sea de calidad, sigue así.
Esta propiedad de Position es uuuffffff., pero con la excelente explicación de Dorian uno aprende muuuchoooo, pero exigen mucha pràctica y uso de la propiedad Position.. Gracias y Saludos desde Venezuela 26/01/2024
Sin duda alguna es el mejor curso de CSS que eh visto y esta muy bien explicado, antes de ver el curso habian cosas que ni entendia, pero hasta este punto ya las entiendo, muchas gracias :D
Me siento todo un crack entendiendo qué es lo que va a pasar y qué debo hacer para que pase ciertas cosas antes de que las expliques Dorian, me alegro mucho. Saludos
Estos videos de position y z-index son oro puro. Muchas gracias por hacerlos! Los he visto varias veces, sobre todo porque no siempre tengo que aplicar sticky así que se me olvida cómo funciona; entonces tengo que volver a verlos para entenderlo nuevamente. Un saludo!
Qué buena explicación, Dorian. Puede ser al inicio un poquito difícil de comprender la manera en que funciona este position, pero una vez lo pillas todo cobra sentido. ¡Gracias!
Me costó bastante pero pude comprender también cómo aplicar bottom, left y right para sticky. Usar left es igual que top solo que en horizontal. pero bottom y right son más difíciles de utilizar. Resultan confusos porque el flujo va de arriba a abajo y de izquierda a derecha, entonces a pesar de hacer lo mismo que top y right pero de forma invertida, "empujando" los elementos con sticky desde el lado opuesto, se ve mucho más extraño, pero se me ocurren algunas situaciones en las que pueden ser muy útiles. ¡Muchas gracias, tus clases me están siendo fundamentales para avanzar en programación web! No hay cursos tan buenos en ninguna otra parte.
Wacho, qué dolor de cabeza tuve esta tarde intentando obtener el resultado de stycki con fixed. Me salvaste horas con tu explicación tan clara. Muchas gracias
Muy bueno lo solucioné y adhiero: no solo el padre debería tener overflow visible, sino todos los padres de ese padre hasta llegar al body, ya que el scroll que estamos moviendo es el de la pagina completa
*AMIGO MUITO OBRIGADO, ESTAVA AQUI QUEBRANDO A CABEÇA NO FIXED NA QUAL NÃO É RESPONSSIVO. VOCÊ ME AJUDOU MUITO, EU NÃO SABIA DESSA PROPRIEDADE STICKY. GRATIDÕES DE UM BRASILEIRO.*
Buenardo, si entendí bien position sticky funcionará mientras el elemento padre tenga suficiente espacio o contenido para hacer scroll y a partir de el total de lo que mide ese contenido podemos usar top, left, right y bottom desde donde queramos que empieze a funcionar.
Perdon mi ignorancia...pero cuando añades la propiedad sticky al header...este mismo no tiene ninguna longitud definida y no veo un elemento padre que sea tomado como referencia para que funcione el sticky...y aun asi funciona...pero despues mencionas que el elemento padre debe tener definida la altura para que funcione el sticky...estoy confundido... Gracias de antemano si alguno me saca de la duda
Tengo una duda en la parte en la que pones sticky a la clase article-title por que funciono si a su contenedor no le habías puesto medida? espero puedas resolver mi duda
Hola, espero no sea tarde para responder y sea claro. Si te das cuenta esa clase article-title está junto a un párrafo de relleno (este párrafo de relleno es lo que le está dando medida a todo el article que en este caso es el "PADRE" como bien lo mencionas). Puedes quitarle al padre (article) el párrafo de relleno y verás que no funcionará. En conclusión el párrafo de relleno está haciendo de altura. Un saludo :')
@@jeansosa463 hola, espero puedas ayudarme. Entendí gran parte de la explicación del profesor, pero la parte de cuando le pone sticky al .menu me confundió el motivo por el cual no funcionó ahí (a no ser que se le de altura) y en .header si funcionó. Para ser más específica en mi duda, funcionó en el .header porque el tamaño se lo estaba dando su contenido (el nav)?.
@@jeansosa463 buenas noches jean, agradezco que me hayas respondido, por mera curiosidad me puse a indagar un poco con otros ejemplo y ya logré aclarar mi duda. De nuevo, muchas gracias 😺
En la comunidad de discord, necesitas unir tu cuenta de twich con la de discord y te aparecerá un canal nuevo donde están todos los vídeos nuevos. Un saludo!! ☺️
Hola buenas tardes ¿Cómo está? estoy haciendo este ejercicio, sigo sus pasos y sigue sin salirme; ya le puse el height en píxeles al contenedor pero sigue sin salirme, no se en que pueda estar fallando ¿Es necesario que para que funcione el STICKY escriba el ARTICLE necesariamente? lo estoy haciendo con DiVs ¿es lo mismo? gracias , saluditos!
Muy buenas por aqui, haber si echamos de un cable, realizando esta practica no se por que la imagen del gato me sale tan gigante en el navegador, no se si porque la propiedad esta al 100%, haber si me orientan
@@DorianDesings, gracias señor por su respuesta. Con esta pandemia me quede sin empleo y la situación en Colombia es complicada. Como lo dice la tradición de mi pueblo: "mi Dios le pague".
:o esta propiedad no la conocía. Gracias Dorian. Me surgió una duda, ¿hay alguna forma de decirle al elemento que recibe la propiedad sticky que se detenga en cierto punto? Por ejemplo, el contenedor padre tiene un height de 2000px, pero yo quiero que el título (quien tiene la propiedad sticky y tiene un top de 0 y está dentro de este contenedor de 2000px) se detenga a los 1000px. No se en que caso usaría eso pero me dio esa duda 😅
Hay alguna opción de que cuando se “active” el sticky se puedan aplicar estilos? Algo así como :hover pero con :sticky? Por poner un ejemplo quiero que cuando un H2 se quede pegado arriba cambiarle el color de letra y/o fondo.
Hola a todos, le puse altura al padre y nada. Que será? .divPadreSticky{ background-color:blue; height:300px; } .divSticky{ background-color: aqua; color:white; height: 30px; position: sticky; top:0; }
Tuve que ver el video dos veces y repetir algunas partes y también hice mi propio ejercicio con foto de gato y todo, y finalmente me quedó muy claro, lo cual me produce un bienestar. Gracias.
X2
hace poco vi tu video donde decias que dejaste tu trabajo y mencionabas que en tus videos tratas de dar la información correcta y verificas que todo este en orden, con este video me queda claro de que es verdad, explicaste algo que no explican en otros tutoriales que vi.
Si no hubieses mencionado razones por las que no funciona o como su funcionamiento depende de la caja padre, jamas lo hubiese sabido hasta que me pasara el error.
Me suscribí y con gusto, vere tus tutoriales porque se nota la calidad con los pocos que vi, muchas gracias por compartir tu conocimiento y sobre todo preocuparte por que sea de calidad, sigue así.
Esta propiedad de Position es uuuffffff., pero con la excelente explicación de Dorian uno aprende muuuchoooo, pero exigen mucha pràctica y uso de la propiedad Position.. Gracias y Saludos desde Venezuela 26/01/2024
Sin duda alguna es el mejor curso de CSS que eh visto y esta muy bien explicado, antes de ver el curso habian cosas que ni entendia, pero hasta este punto ya las entiendo, muchas gracias :D
Me siento todo un crack entendiendo qué es lo que va a pasar y qué debo hacer para que pase ciertas cosas antes de que las expliques Dorian, me alegro mucho. Saludos
Muy buena explicación, busqué mucho y no había encontrado el lugar donde se explicaba a precisión el tema, muchas gracias!
Estos videos de position y z-index son oro puro. Muchas gracias por hacerlos! Los he visto varias veces, sobre todo porque no siempre tengo que aplicar sticky así que se me olvida cómo funciona; entonces tengo que volver a verlos para entenderlo nuevamente. Un saludo!
Qué buena explicación, Dorian.
Puede ser al inicio un poquito difícil de comprender la manera en que funciona este position, pero una vez lo pillas todo cobra sentido.
¡Gracias!
Excelente, masterclass total, muchas gracias!!
Me costó bastante pero pude comprender también cómo aplicar bottom, left y right para sticky. Usar left es igual que top solo que en horizontal. pero bottom y right son más difíciles de utilizar. Resultan confusos porque el flujo va de arriba a abajo y de izquierda a derecha, entonces a pesar de hacer lo mismo que top y right pero de forma invertida, "empujando" los elementos con sticky desde el lado opuesto, se ve mucho más extraño, pero se me ocurren algunas situaciones en las que pueden ser muy útiles.
¡Muchas gracias, tus clases me están siendo fundamentales para avanzar en programación web! No hay cursos tan buenos en ninguna otra parte.
Eres infnitamente el mejor. Gracias!!!
Excelente curso y sobre todo muy bien explicado, muchas gracias por compartir tus conocimientos 😁
Como siempre gran contenido!!!!
Muchas gracias por el contenido, excelente como siempre
Sùper enetendible todo. Muy buena pedagogía !!!
Muchas gracias, la explicación es perfecta.
Genial esta explicacion 🙌🏻
¡Gran video! ¡Llevaba una hora buscando una solución al respecto!
Gracias! me ayudo mucho tú video!!!
Muchas gracias!! No me estaba funcionando el sticky y no sabia bien porque! ♥
Wacho, qué dolor de cabeza tuve esta tarde intentando obtener el resultado de stycki con fixed. Me salvaste horas con tu explicación tan clara. Muchas gracias
Muy bien explicado y cómo siempre con detalles para tomar nota. Gracias!
GRACIAS
Wow! al fin comprendo Sticky!! que crack! muchas gracias!
gracias, me sacaste de una gran duda!
Muchas gracias, me ayudó bastante en una duda que me tenía atascada
Muchísimas gracias
Excelente video
Graacias, la verdad estaba pillado con porque no funcionaba y no puedo creer que explicaste como funcionaba el top y se me soluciono xd.
Muito bem, deu certo. Obrigado!
muchas gracias, un excelente contenido, bien explicado y buenos tips.
graciasssss :D estoy aprendiendo css y esto me resolvio esa gran duda de por que no funcionaba
Muy bueno lo solucioné y adhiero: no solo el padre debería tener overflow visible, sino todos los padres de ese padre hasta llegar al body, ya que el scroll que estamos moviendo es el de la pagina completa
Vídeo estupendo por la claridad con que se explica.
y porqué cuando está el position: sticky, en el header si se queda pegado el menu por siempre y no hasta que recorra x pixeles en scroll???
Excelente explicación!
Gracias por comentar
muy buena explicación, se entiende y se puede aplicar bastante bien (solo vi los primeros 3 minutos)
*AMIGO MUITO OBRIGADO, ESTAVA AQUI QUEBRANDO A CABEÇA NO FIXED NA QUAL NÃO É RESPONSSIVO. VOCÊ ME AJUDOU MUITO, EU NÃO SABIA DESSA PROPRIEDADE STICKY. GRATIDÕES DE UM BRASILEIRO.*
Gracias bro ! explicas re bien !
Muy buen aporte!
A mi no me funcionaba pero era porque el contenedor estaba anidado dentro de otro.
genio, lo del overflow me salvo la vida
Buenardo, si entendí bien position sticky funcionará mientras el elemento padre tenga suficiente espacio o contenido para hacer scroll y a partir de el total de lo que mide ese contenido podemos usar top, left, right y bottom desde donde queramos que empieze a funcionar.
Perdon mi ignorancia...pero cuando añades la propiedad sticky al header...este mismo no tiene ninguna longitud definida y no veo un elemento padre que sea tomado como referencia para que funcione el sticky...y aun asi funciona...pero despues mencionas que el elemento padre debe tener definida la altura para que funcione el sticky...estoy confundido... Gracias de antemano si alguno me saca de la duda
me gusta mucho tu tipogafía. ¿podrías decirme que fuente usas? gracias.
Es el mejor curso de CSS que eh visto y esta muy bien explicado
Excelente explicacion
Tengo una duda en la parte en la que pones sticky a la clase article-title por que funciono si a su contenedor no le habías puesto medida? espero puedas resolver mi duda
me refiero a que no le diste altura al padre y funciono
Hola, espero no sea tarde para responder y sea claro.
Si te das cuenta esa clase article-title está junto a un párrafo de relleno (este párrafo de relleno es lo que le está dando medida a todo el article que en este caso es el "PADRE" como bien lo mencionas). Puedes quitarle al padre (article) el párrafo de relleno y verás que no funcionará. En conclusión el párrafo de relleno está haciendo de altura. Un saludo :')
@@jeansosa463 hola, espero puedas ayudarme. Entendí gran parte de la explicación del profesor, pero la parte de cuando le pone sticky al .menu me confundió el motivo por el cual no funcionó ahí (a no ser que se le de altura) y en .header si funcionó. Para ser más específica en mi duda, funcionó en el .header porque el tamaño se lo estaba dando su contenido (el nav)?.
@@Jessica-mg3bf buenas noches, recién llego del trabajo uu estoy muerto. Dentro de 10 horas responderé a tu pregunta si aún existe la duda un saludo.
@@jeansosa463 buenas noches jean, agradezco que me hayas respondido, por mera curiosidad me puse a indagar un poco con otros ejemplo y ya logré aclarar mi duda.
De nuevo, muchas gracias 😺
Excelente
Soy suscriptor y seguidor en twich con prime y no se donde ver los videos que comentas que ya estan disponibles, un saludo
En la comunidad de discord, necesitas unir tu cuenta de twich con la de discord y te aparecerá un canal nuevo donde están todos los vídeos nuevos. Un saludo!! ☺️
Es revelador en los minutos 3:45", entendiendo que recorre el contenido de su ancestro más cercano
yo al final pendiente de dorian que explicara algo con la img ajajajja
Pero como siempre Dorian Excelente los videos y todo
Hola buenas tardes ¿Cómo está? estoy haciendo este ejercicio, sigo sus pasos y sigue sin salirme; ya le puse el height en píxeles al contenedor pero sigue sin salirme, no se en que pueda estar fallando ¿Es necesario que para que funcione el STICKY escriba el ARTICLE necesariamente? lo estoy haciendo con DiVs ¿es lo mismo? gracias , saluditos!
Gracias, en verdad, ya la tengo clara, en conclusión, solo funciona en relación a la caja padre
Rayos necesito 50 videos con ejemplos.. jaja
Muy buenas por aqui, haber si echamos de un cable, realizando esta practica no se por que la imagen del gato me sale tan gigante en el navegador, no se si porque la propiedad esta al 100%, haber si me orientan
por eso no me funciona en la web :c , pero agregar alto a la pagina como que no me gusta mejor uso fixed aunque no sea igual el comportamiento
Hay si me mataste con esto Señor Dorian. Y los que no tenemos plata para pagar patreon NOS CORTASTES
LAS ALAS...
Tienes 3 opciones, Pagar $1 en patreon, ser suscriptor en twitch, que si tienes prime es gratis, o esperar, al final lo verás igualmente
@@DorianDesings, gracias señor por su respuesta. Con esta pandemia me quede sin empleo y la situación en Colombia es complicada. Como lo dice la tradición de mi pueblo: "mi Dios le pague".
:o esta propiedad no la conocía. Gracias Dorian. Me surgió una duda, ¿hay alguna forma de decirle al elemento que recibe la propiedad sticky que se detenga en cierto punto? Por ejemplo, el contenedor padre tiene un height de 2000px, pero yo quiero que el título (quien tiene la propiedad sticky y tiene un top de 0 y está dentro de este contenedor de 2000px) se detenga a los 1000px. No se en que caso usaría eso pero me dio esa duda 😅
No creo que con css se pueda puede hacerlo con Javascript con la Api de intersection observer.
Hay alguna opción de que cuando se “active” el sticky se puedan aplicar estilos? Algo así como :hover pero con :sticky?
Por poner un ejemplo quiero que cuando un H2 se quede pegado arriba cambiarle el color de letra y/o fondo.
Creo que te respondí esta duda, pero te recuerdo no sé puede con css, hace falta Javascript. 🙂
CRAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACK
Hola a todos, le puse altura al padre y nada. Que será?
.divPadreSticky{
background-color:blue;
height:300px;
}
.divSticky{
background-color: aqua;
color:white;
height: 30px;
position: sticky;
top:0;
}
No tiene ancho, sticky deja el tamaño del elemento en 0 y tienes que especificarlo, funciona como absolute.
muchas gracias ya entendi, mi height era 0 y le puse ahora 100vh xd
graciasssss :D estoy aprendiendo css y esto me resolvio esa gran duda de por que no funcionaba