🔵TUTORIAL ▶ How to use and why POSITION STICKY DOES NOT WORK | CSS Course from ZERO 2021 - #38

Подписаться 80 тыс.

Просмотров 25 тыс.

50% 1

LEARN about POSITION STICKY and How to Use it | Watch my CSS COURSE from scratch 2021 ▶ UPDATED
👋Hi, I'm Dorian and I'm going to teach you how to program in a simple and correct way with the official specifications, I assure you that when you finish this course and continue with the following ones you will be able to find better job opportunities or maybe do that web project you have wanted so much, but you had no idea where to start.
If you have any doubt or question about this course or a specific exercise, I invite you to join the Discord community where more than 6 thousand people will be ready to help you in your growth.
Join the discord community! 👇
/ discord
👇If you want to learn a little more and hang out with me stop by my Twitch and say hi 👇
TWITCH / doriandesings
Practice text:👇
mega.nz/file/D...
Advanced courses on Udemy👇
doriandesings....
Support the channel by donating via paypal. 👇
www.paypal.me/...
EXCLUSIVE ADVANTAGES!!! 👇
/ doriandesings
Repositories on Github: 👇
github.com/Dor...
My setup: 👇
www.amazon.es/...
My social networks: 👇
🖼️ Instagram - / dorian_desings
💬 Facebook - / yoaprendocondorian
🐦Twitter - / doriandesings📋
#LearnCSSwithDorian

Опубликовано:

25 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 78

@jorgevalenzuelasandoval2386 3 года назад

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.

@franbx2554 2 года назад

@jonathanpro123xdpro7 3 года назад

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í.

@jeansosa463 2 года назад

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

@xxhmmrxx281 3 года назад

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

@camiloandresjuradocoral2174 4 месяца назад

Muy buena explicación, busqué mucho y no había encontrado el lugar donde se explicaba a precisión el tema, muchas gracias!

@CarlosMunoz-mt5jj 2 года назад

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!

@facundojulianortega4811 2 года назад

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.

@luismonagas573 8 месяцев назад

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

@Aaron_T 2 года назад

Excelente curso y sobre todo muy bien explicado, muchas gracias por compartir tus conocimientos 😁

@lh536 Год назад

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!

@brunobordon6211 7 месяцев назад

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

@mariaemiliapigini3333 11 месяцев назад

Muchas gracias!! No me estaba funcionando el sticky y no sabia bien porque! ♥

@shantysilva5230 Год назад

Muchas gracias, me ayudó bastante en una duda que me tenía atascada

@guidopellegrini4167 9 месяцев назад

Excelente, masterclass total, muchas gracias!!

@dominiquecancino3705 8 месяцев назад

Eres infnitamente el mejor. Gracias!!!

@mantorbe Год назад

Sùper enetendible todo. Muy buena pedagogía !!!

@davidm.8835 3 года назад

Muy bien explicado y cómo siempre con detalles para tomar nota. Gracias!

@DorianDesings 3 года назад

GRACIAS

@fernandoalbertopinedaarena2294 Год назад

Como siempre gran contenido!!!!

@raulaponte351 2 года назад

graciasssss :D estoy aprendiendo css y esto me resolvio esa gran duda de por que no funcionaba

@gabrielzapata7047 Год назад

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

@williamjaimesj.1366 11 месяцев назад

Muchas gracias por el contenido, excelente como siempre

@gefranviana4742 2 года назад

*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.*

@adrianlyork 2 года назад

Muy buen aporte! A mi no me funcionaba pero era porque el contenedor estaba anidado dentro de otro.

@megasirob 3 года назад

Graacias, la verdad estaba pillado con porque no funcionaba y no puedo creer que explicaste como funcionaba el top y se me soluciono xd.

@juandiegoescobarlondono6095 2 года назад

Muchas gracias, la explicación es perfecta.

@Piposarsa Год назад

Gracias! me ayudo mucho tú video!!!

@000...0 Год назад

¡Gran video! ¡Llevaba una hora buscando una solución al respecto!

@poun2767 Год назад

Genial esta explicacion 🙌🏻

@JulioYacot 3 года назад

Wow! al fin comprendo Sticky!! que crack! muchas gracias!

@mauriciomolina8613 Год назад

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???

@gabrielscocozza2351 3 года назад

genio, lo del overflow me salvo la vida

@robertoriosmorales7528 2 года назад

muy buena explicación, se entiende y se puede aplicar bastante bien (solo vi los primeros 3 minutos)

@nikotesla2 11 месяцев назад

gracias, me sacaste de una gran duda!

@joseantoniobenlopez3240 3 года назад

Vídeo estupendo por la claridad con que se explica.

@allanrobertoviquezsegura5846 Год назад

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

@edgaralarcon1540 4 месяца назад

Excelente video

@Wolframio_74 3 года назад

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.

@dcloki789 2 года назад

muchas gracias, un excelente contenido, bien explicado y buenos tips.

@ivanssj5810 10 месяцев назад

Muchísimas gracias

@jeanbarco5933 2 года назад

Gracias, en verdad, ya la tengo clara, en conclusión, solo funciona en relación a la caja padre

@Dgokuu Год назад

Es el mejor curso de CSS que eh visto y esta muy bien explicado

@victorlucio6274 Год назад

Muito bem, deu certo. Obrigado!

@androjm 3 года назад

Soy suscriptor y seguidor en twich con prime y no se donde ver los videos que comentas que ya estan disponibles, un saludo

@DorianDesings 3 года назад

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!! ☺️

@cristiancr644 3 года назад

Gracias bro ! explicas re bien !

@gedeon321 3 года назад

yo al final pendiente de dorian que explicara algo con la img ajajajja Pero como siempre Dorian Excelente los videos y todo

@sebastianrodelo7965 3 года назад

Excelente explicación!

@DorianDesings 3 года назад

Gracias por comentar

@rodolfogonzalezg 4 месяца назад

Excelente

@gatomontesroseIII 4 дня назад

muchas gracias ya entendi, mi height era 0 y le puse ahora 100vh xd

@kevinalcivar4888 3 года назад

Excelente explicacion

@rosalbamartinez3907 3 года назад

Hay si me mataste con esto Señor Dorian. Y los que no tenemos plata para pagar patreon NOS CORTASTES LAS ALAS...

@DorianDesings 3 года назад

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

@rosalbamartinez3907 3 года назад

@@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".

@JS0998 2 года назад

Rayos necesito 50 videos con ejemplos.. jaja

@emilioVarDev 2 года назад

me gusta mucho tu tipogafía. ¿podrías decirme que fuente usas? gracias.

@candulapopworld Год назад

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!

@DJJLA 2 года назад

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

@alisaramos3051 2 года назад

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

@alisaramos3051 2 года назад

me refiero a que no le diste altura al padre y funciono

@jeansosa463 2 года назад

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 :')

@Jessica-mg3bf Год назад

@@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 Год назад

@@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.

@Jessica-mg3bf Год назад

@@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 😺

@freddy9292 2 года назад

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

@imd_guru 3 года назад

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.

@DorianDesings 3 года назад

Creo que te respondí esta duda, pero te recuerdo no sé puede con css, hace falta Javascript. 🙂

@gonzalorojas7808 3 года назад

Es revelador en los minutos 3:45", entendiendo que recorre el contenido de su ancestro más cercano

@ivandinamarcacastro583 2 года назад

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; }

@DorianDesings 2 года назад

No tiene ancho, sticky deja el tamaño del elemento en 0 y tienes que especificarlo, funciona como absolute.

@luisgranados2006 3 года назад

: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 😅