CSS POSITION fixed y sticky (GUÍA DEFINITIVA) 🎨

แชร์
ฝัง
  • เผยแพร่เมื่อ 29 ม.ค. 2025

ความคิดเห็น • 96

  • @keyquotes
    @keyquotes  4 ปีที่แล้ว +3

    Échale un vistazo a TODOS los videos de CSS
    👇👇
    bit.ly/3fgFlna

  • @kinyoldboy9240
    @kinyoldboy9240 3 ปีที่แล้ว

    2 meses de clases resumidas en 2 minutos. Eres el puto amo!!!

  • @ctprintcmyk5718
    @ctprintcmyk5718 3 หลายเดือนก่อน

    este crack me ayudo lo que no me ayudaron 100 videos en 2 días y en 3 minutos, que crack, triste que fueron los últimos desde hace 4 años

  • @Alexhernandezgallegos
    @Alexhernandezgallegos 4 ปีที่แล้ว +15

    Wow como han cambiando tus videos, me gusto bastante el cambio “muy bien!!”
    Solo no nos abandones por tanto tiempo!
    Me gusto mucho el nuevo formato!
    Gracias a ti aprendí un buen y me impulsaste a ser desarrollador!
    Saludos desde MEXICO!

    • @keyquotes
      @keyquotes  4 ปีที่แล้ว +1

      Me alegro que te haya gustado el cambio! Es genial poder inspirar a algunas personas para que hagan lo que les gusta!! Muchas gracias! 😋

  • @deriancordoba1684
    @deriancordoba1684 4 ปีที่แล้ว +2

    Grandioso que hayas vuelto keyquotes saludos

    • @keyquotes
      @keyquotes  4 ปีที่แล้ว

      Gracias! Estoy de vuelta con más fuerza que nunca!! 💪

  • @rayito845
    @rayito845 3 ปีที่แล้ว +4

    Increible explicacion no dejes morir el canal (Nuevo suscriptor )

  • @AlexRomero-o6w
    @AlexRomero-o6w ปีที่แล้ว

    Eres el más chingón. Tanto tiempo sin seguir entendiendo como funciona

  • @martinguendulain7626
    @martinguendulain7626 หลายเดือนก่อน

    Muchas gracias, me has ayudado mucho!, por fín he logrado entender el position sticky!

  • @predicadorlolp
    @predicadorlolp 4 ปีที่แล้ว +5

    Se entiende muy muy bien con la guia visual que usas, sigue subiendo la guia definitiva de css buen video capo

    • @keyquotes
      @keyquotes  4 ปีที่แล้ว +1

      Me alegra que te sea últil! la idea era hacer una guía diferente y parece que va por buen camino 😃

  • @ponkezo
    @ponkezo 10 หลายเดือนก่อน +1

    2 horas pendejeando con gemini y chatgpt. Me has arreglado la vida con 2:23 y sticky, grande.

  • @loneliness746
    @loneliness746 5 หลายเดือนก่อน

    Como me gusta que la gente no le de tanta vuelta a las cosas, EXCELENTE!

  • @juanlatorre513
    @juanlatorre513 2 ปีที่แล้ว

    Súper agradecido con tus videos, la forma en la que explicas y los ejemplos son de lo mejor ademas que sean videos cortos se agradece mucho
    Muchas Gracias por compartir tu conocimiento

  • @danystefanescu1990
    @danystefanescu1990 2 ปีที่แล้ว

    Otro suscriptor por aquí, no abandones! ❤

  • @nicohernandez5996
    @nicohernandez5996 ปีที่แล้ว

    Buenisimo contenido. Mejor explicacion no encontre, gracias Profe.

  • @elliotgaramendi
    @elliotgaramendi 3 ปีที่แล้ว

    Hermano! Pero qué calidad! Gracias! Se lo compartiré a mis amigos! Muchas gracias!

  • @alanrodrigoaxotlapena3363
    @alanrodrigoaxotlapena3363 3 ปีที่แล้ว

    Que bueno que encontre tus videos, me quedo pa siempre

  • @kevinccharp
    @kevinccharp 2 ปีที่แล้ว +2

    Exelente muy grafico, espero mas explicando grid y flexbox

  • @Peter-p6o5x
    @Peter-p6o5x ปีที่แล้ว

    Muy buenos tus videos y excelente forma de explicar!

  • @jaimesanchezgalvis
    @jaimesanchezgalvis 2 ปีที่แล้ว

    Demasiado top regresao cada ves que tengo que implementarlo jejeje muchas gracias

  • @freddypercia
    @freddypercia 3 ปีที่แล้ว

    La mejor explicasion, de youtube

  • @L_Yisus
    @L_Yisus 4 ปีที่แล้ว

    Increible!! Bastante Claro!. Muchas gracias. Estare atento a más contenido.

  • @franhz3298
    @franhz3298 2 ปีที่แล้ว

    Que genio eres, nuevo sub y muchas gracias por compartir tus conocimientos.

  • @VelizFrancia2012
    @VelizFrancia2012 3 ปีที่แล้ว

    las animaciones ayudan muuuuuchoooo. Gracias!

  • @Jordan-vb6ze
    @Jordan-vb6ze 2 ปีที่แล้ว

    Me encanta el formato!!!! Ojalá vuelas a subir más videos 🥺🥺🥺

  • @luisarmandocheccllomantari9776
    @luisarmandocheccllomantari9776 4 ปีที่แล้ว

    me ayudo mucho este vídeo, justo lo que requería, gracias por el valioso contenido

  • @marcosesquivel7846
    @marcosesquivel7846 ปีที่แล้ว

    claro y concizo, perfecto amigo.

  • @jackandc4568
    @jackandc4568 3 ปีที่แล้ว

    pues si ponge position fixed, el bloque se me va hacia atrás. Me he dado cuenta de que esto ocurre si el bloque no es el primero. Si pones position fixed en un bloque que no es el primero que aparece, éste se quedará fijo pero el resto de elementos pasarán por encima de él. En cambio si es el primer bloque que aparece, en tu caso el color verde de la imagen del min 2:02) los demás elementos pasarán por debajo de él.

  • @davidmedinaalfonso4593
    @davidmedinaalfonso4593 3 ปีที่แล้ว

    supeeer.:ameno dicactico, concsico y practico! graciass

  • @redtres3
    @redtres3 ปีที่แล้ว

    @keyquotes ya no seguiste con tus videos? Son muy buenos y muy gráficos, gracias por compartirlos :D

  • @carloseduardosanchezcarras4151
    @carloseduardosanchezcarras4151 6 หลายเดือนก่อน

    bro con super bien la explicacion gracias

  • @emanuelenriquez4479
    @emanuelenriquez4479 4 ปีที่แล้ว

    Me gusto mucho el vídeo
    Muy buena explicación

  • @davidramirez9727
    @davidramirez9727 2 ปีที่แล้ว

    viejo,explicas de marvilla,muchas gracias por compartir!!

  • @Henderson-k6k
    @Henderson-k6k 2 ปีที่แล้ว

    Habia hecho un navbar con flexbox (justify-content: space around;) y al momento de ponerle position fixed perdio todo el orden que ya tenia, porque sucede eso? Sera que tenia que ponerle primero la posicion fixed al contenedor y de ahi empezar a trabajar el navbar con flexbox? Al final lo solucione usando sticky top: 0 pero me quedo esa duda de porque con fixed el flexbox perdio el orden yendose todo a un solo costado (izquierdo). Saludos y excelente explicacion.

  • @gabyg9905
    @gabyg9905 2 ปีที่แล้ว

    cortita y al pie. Muy bueno

  • @gustavoguzmanroldan5219
    @gustavoguzmanroldan5219 2 ปีที่แล้ว

    muy buen video, buena explicación y los ejemplos sencillos pero al punto.

  • @nelsonlarico2313
    @nelsonlarico2313 2 ปีที่แล้ว

    Excelente amigo muchas gracias

  • @Soul1645
    @Soul1645 ปีที่แล้ว

    llevava media hora intentando hacerlo y no me funcionava por no poner top 0, gracias por el video

  •  3 ปีที่แล้ว

    gracias por la simplicidad de la expicación

  • @pabloandresfernandezcari2902
    @pabloandresfernandezcari2902 2 ปีที่แล้ว

    Muy buen video, muchas gracias!

  • @gianfrancoperaltabravo6004
    @gianfrancoperaltabravo6004 3 ปีที่แล้ว

    Rapido y al grano, Buen video!

  • @monsieurmilo2841
    @monsieurmilo2841 7 หลายเดือนก่อน

    Te amo ❤

  • @yoto8807
    @yoto8807 4 ปีที่แล้ว

    Gracias bro, me facilitas la vida

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 2 ปีที่แล้ว

    Gracias por la aclaración dejo like y sub

  • @jasongrant2366
    @jasongrant2366 2 ปีที่แล้ว +1

    ya pero cuando el proximo elemento llega, este lo empuja hacia arriba, haciendo que desaparezca

  • @luisguzman9743
    @luisguzman9743 4 ปีที่แล้ว

    Que buena explicación. Gracias

  • @pitrubio
    @pitrubio 3 ปีที่แล้ว

    Genio... Te agradezco por las animaciones ilustrativas. ¿Tu las haces?

  • @juanmartinfaccia4009
    @juanmartinfaccia4009 2 ปีที่แล้ว

    @keyquotes Hola buen video. Tengo la navbar sticky, pero cuando voy scrolleando y se topa con un carrusel este se superpone, y la navbar pasa por abajo. Estoy usando un carrusel de Bootstrap v05.

    • @keyquotes
      @keyquotes  2 ปีที่แล้ว +1

      Hola! Prueba a poner la propiedad z-index al navbar. Esta propiedad es numérica y un orden de capas en el plano z (profundidad). Puedes probar con z-index: 2; al contenedor del navbar y ver si ya no se superpone. Si se sigue viendo mal eleva el número a 20, 30 etc

  • @TecnicasDelcampo
    @TecnicasDelcampo 2 ปีที่แล้ว

    un videaso graacias

  • @fgughy
    @fgughy 11 หลายเดือนก่อน

    que paso hermano ... no hay mas videos

  • @javiergarciafillol4454
    @javiergarciafillol4454 3 ปีที่แล้ว

    Buen video, solo una duda cuando no funciona el sticky pero si el fixed?

  • @rincondeautos4418
    @rincondeautos4418 4 หลายเดือนก่อน

    Buen video bro

  • @ModoHeraldo
    @ModoHeraldo 4 ปีที่แล้ว

    buena joyita he encontrado : )

  • @CarlosMartinez-hg8qi
    @CarlosMartinez-hg8qi 4 ปีที่แล้ว

    Muy buen video me encantó

  • @byfeelescritorblanco4161
    @byfeelescritorblanco4161 4 ปีที่แล้ว

    eres un durooo

  • @Julian_cba
    @Julian_cba ปีที่แล้ว

    como hago que un boton este en la parte izquierda?

  • @riquelmista6153
    @riquelmista6153 2 ปีที่แล้ว

    Por que no subis mas videos? Estan excelentes. Espero que estes bien!

  • @saulyassermedinacalderon1391
    @saulyassermedinacalderon1391 2 ปีที่แล้ว

    llevaba 30 minutos tratando de resolver esto y tu me lo aclaraste en 2

  • @TheTrauma
    @TheTrauma 3 ปีที่แล้ว +1

    hola, buenas, muy buen video, pero tengo una consulta, como puedo hacer con el sticky para que se mueva de esa manera hasta cierto punto y dps se quede quieto y no siga bajando? así como tienen algunas páginas de noticias, gracias, un saludo

    • @AbeL-mp3cq
      @AbeL-mp3cq 3 ปีที่แล้ว +1

      hola, disculpa, pudiste solucionarlo?

    • @TheTrauma
      @TheTrauma 3 ปีที่แล้ว

      @@AbeL-mp3cq no pude :'( pero si sabes cómo avisame porfa

  • @secundariodavid
    @secundariodavid 4 ปีที่แล้ว

    muchas graciaaas!!

  • @matufricke9024
    @matufricke9024 2 ปีที่แล้ว

    te amo

  • @ijeanpierrebp
    @ijeanpierrebp 3 ปีที่แล้ว +1

    excelentes ejemplos, como haces esos graficos?

  • @danielsegura8726
    @danielsegura8726 4 ปีที่แล้ว

    gracias

  • @brandonsoto6233
    @brandonsoto6233 4 ปีที่แล้ว

    Genial !

  • @henry1544
    @henry1544 4 ปีที่แล้ว

    Buenos vídeos

    • @keyquotes
      @keyquotes  4 ปีที่แล้ว

      Gracias! 😋

  • @ernestoaquino8086
    @ernestoaquino8086 2 ปีที่แล้ว

    y como podría usar dos position fixed y elegir cual va primero?

    • @keyquotes
      @keyquotes  2 ปีที่แล้ว +1

      la propiedad de css z-index define la posición en el eje z para un elemento. Cuanto más alto el valor que le pongas más arriba se situará.

    • @keyquotes
      @keyquotes  2 ปีที่แล้ว +1

      la propiedad de css z-index define la posición en el eje z para un elemento. Cuanto más alto el valor que le pongas más arriba se situará.

  • @david_jsx
    @david_jsx 4 ปีที่แล้ว

    Alguien podría ayudarme? Me pasa que al posicionar el 'navbar', el contenido de abajo se corre al principio de la página (parte del contenido se cubre por el navbar)
    Quisiera fijar el nabvar conservando el contenido de abajo en su sitio sin que se mueva y que estos respeten el height del navbar.

    • @manuromero6083
      @manuromero6083 2 ปีที่แล้ว

      Hola, me esta pasando justo ahora. Como lo pudiste solucionar?

    • @david_jsx
      @david_jsx 2 ปีที่แล้ว +1

      @@manuromero6083 Honestamente, no recuerdo exactamente jaja Pero solía hacer 'trampa', es decir, al elemento que se 'corre' puedes ponerle position: relative y un 'top' del tamaño del alto de tu nabvar.

  • @kevinccharp
    @kevinccharp ปีที่แล้ว

    Este contenido estaba bueno no se porque no continuaron, entendi con los videos cortos y la muestra visual

  • @wilsonsalinas2889
    @wilsonsalinas2889 ปีที่แล้ว

    capo

  • @caespinoza
    @caespinoza 4 ปีที่แล้ว

    exelente video bro, como haces las animaciones de las cards y el codigo?

    • @keyquotes
      @keyquotes  4 ปีที่แล้ว

      Uso adobe premiere, aunque lo ideal sería usar after effects. Un saludo! 🙃

  • @santisoldani
    @santisoldani 8 หลายเดือนก่อน

    2:13 falto el punto y coma

  • @jaime7295
    @jaime7295 4 ปีที่แล้ว

    like

  • @jamesmcfly97yt29
    @jamesmcfly97yt29 3 ปีที่แล้ว

    el ultimo video fue hace casi un año :'c

  • @zinedinejeanpierreeriqueto7181
    @zinedinejeanpierreeriqueto7181 4 ปีที่แล้ว

    mas videos porfa :'(

  • @raullnx
    @raullnx 3 ปีที่แล้ว

    El problema con sticky viene cuando los divs "padres" tienen el overflow ... la cosa "se complica".

  • @gianchristianvillalobosveg1903
    @gianchristianvillalobosveg1903 2 หลายเดือนก่อน

    :o

  • @Juanprogram1
    @Juanprogram1 9 หลายเดือนก่อน

    melo

  • @3Designer_col
    @3Designer_col 3 ปีที่แล้ว

    pero no dejes botado tu canal 1 añooooo

  • @front-endanimal6359
    @front-endanimal6359 4 ปีที่แล้ว

    i too wanna mac((

  • @NeoFTW
    @NeoFTW 3 ปีที่แล้ว

    no funciona

  • @aguss3163
    @aguss3163 2 ปีที่แล้ว

    Mentira

  • @gastonbuesas2081
    @gastonbuesas2081 ปีที่แล้ว

    Buen video, muy didactico, gracias!

  • @francovedia5584
    @francovedia5584 ปีที่แล้ว

    gracias