Domina POSITION CSS. Guía completa ✅. Position relative, absolute, fixed, sticky y z-index.

Sdílet
Vložit
  • čas přidán 17. 04. 2023
  • En este vídeo, te enseñaré cómo utilizar la propiedad "position" en CSS para posicionar elementos en tu sitio web.
    La propiedad "position" es una herramienta importante en CSS para el diseño de páginas web y su correcta utilización puede marcar una gran diferencia en la presentación visual de tu sitio. En este tutorial, te mostraré cómo utilizar los diferentes valores de "position" como "static", "relative", "absolute", y "fixed" para posicionar elementos de manera precisa en tu página web.
    Aprenderás cómo utilizar la propiedad "position" para posicionar elementos en diferentes lugares de tu sitio, como en el centro de la pantalla, en una esquina, o en un lugar específico dentro de un contenedor. Además, te mostraré cómo combinar "position" con otras propiedades CSS como "top", "bottom", "left", y "right" para lograr un posicionamiento más preciso.

Komentáře • 56

  • @denjiuzumaki4309
    @denjiuzumaki4309 Před 2 měsíci +4

    profin un tutorial claro y que explica punto a punto, gracias!!!

  • @bagnoum747
    @bagnoum747 Před měsícem +4

    Uno de los mejores vídeos.

  • @Gabi_leve
    @Gabi_leve Před 28 dny

    waaaoooo no pude terminar de ver el video para comentar, excelente explicación, tan detallada... así puedo entender bien. Gracias!! Te felicito y que tengas muchos más éxitos!

  • @momorex7945
    @momorex7945 Před 6 měsíci +7

    Me vi 3 videos de position en otros canales y no entendí nada, pero luego de ver tu video, se entendió! muy bien explicado!

  • @gregoryperez4566
    @gregoryperez4566 Před 9 měsíci +5

    cuando curso de CSS completo?con lo bien que explicas deberias de hacer uno

  • @user-dz9fd5mu4t
    @user-dz9fd5mu4t Před 8 měsíci +1

    brutal, este pana si tiene pedagogía, eeexceleeeenteeee

  • @woodenhouse8531
    @woodenhouse8531 Před 9 měsíci

    Muy buen video y muy bien explicado. Gracias!!

  • @alejandrob8215
    @alejandrob8215 Před 9 měsíci

    Excelente video, rápido, sencillo y claro...muchas gracias!!!

  • @sebastianabella5581
    @sebastianabella5581 Před 10 měsíci

    Excelente explicación, muchas gracias.

  • @germanangeles5648
    @germanangeles5648 Před 10 měsíci

    Que bien explicado, gracias

  • @soniaroblesgimenez3863
    @soniaroblesgimenez3863 Před 9 měsíci

    por fin un video donde lo explican perfecto! Gracias!

  • @SolaPazEnergy
    @SolaPazEnergy Před 8 měsíci

    Estupendo tutorial amigo. Gracias y saludos

  • @danielarboleda5213
    @danielarboleda5213 Před 4 měsíci

    Eureka genial este video, excelente explicación muchas gracias por este contenido

  • @rOxhhh
    @rOxhhh Před 6 měsíci

    Excelente crack! explicaciòn excelente!

  • @maib2192
    @maib2192 Před 5 měsíci

    Me gustaria unos videos explicando mas sobre esos detalles del css

  • @martinvarela206
    @martinvarela206 Před 10 měsíci

    Like y comentario, porque se merece más vistas

  • @israeel947-jlg
    @israeel947-jlg Před 8 měsíci

    que buen video.

  • @Kabasho
    @Kabasho Před 5 měsíci

    Gracias!

  • @kenetyujrachoque1822
    @kenetyujrachoque1822 Před 5 měsíci

    Estuvo genial, fue un buen video a decir verdad estaria bueno que hiciera un libro que tenga una guía 😊, me fue de ayuda muchas gracias mi esttimado 🧐

  • @maib2192
    @maib2192 Před 5 měsíci

    Excellent, bien explicado, el que no entienda que reconsidere estudiar esto😅,, Gracias

  • @ignaciofrailebayon2714
    @ignaciofrailebayon2714 Před 7 měsíci

    Muy bien explicado!! muy buena capacitación...un curso de html5 y CSS3 moderno porfavor??

    • @EurekaTutoriales
      @EurekaTutoriales  Před 7 měsíci

      Gracias!! Seguro que seguiré subiendo videos sobre CSS.

  • @3Aniram
    @3Aniram Před 8 měsíci

    Me ha gustado mucho y me gustaría tenerlo para consultas rápidas pero no está la opción de guardarlo en una lista

    • @EurekaTutoriales
      @EurekaTutoriales  Před 8 měsíci

      Hola, lo he probado y a mi si me deja guardarlo. ¿Que mensaje te sale?

    • @3Aniram
      @3Aniram Před 8 měsíci

      ya aparece. No aparecía la opción ni de download ni los tres puntitos para guardar. Que raro

  • @fgughy
    @fgughy Před 4 měsíci

    seria ...bueno ke aclares ... que el selector universal . margin padin box sizing ... cuales son sus valores... me rompi la cabeza para allar el error ...

    • @EurekaTutoriales
      @EurekaTutoriales  Před 4 měsíci

      Cierto, no expliqué para que sirve boxsizing. Espero que ya lo hayas averiguado. Sino vuelve aquí y te lo aclaro. Un saludo.

  • @victorsebastiantriguerotap9314

    Muy buen video, aprendí muy bien en como funciona el position, pero tengo una duda.
    ¿Cómo se hace que dos div se muevan entre si, como un menu desplegable y el contenido se mueve al abrirse dicho menu

    • @EurekaTutoriales
      @EurekaTutoriales  Před 10 měsíci

      No entiendo muy bien tu pregunta, pero podrías utilizar la pseudoclaes hover en css para mostrar el segundo div cuando pases el mouse encima del primero.

    • @victorsebastiantriguerotap9314
      @victorsebastiantriguerotap9314 Před 10 měsíci

      @@EurekaTutoriales Mi duda es sobre como se mueven de forma responsiva los divs, hacer que ninguna esta por encima o por debajo de la otra.
      Por ejemplo, hago un menu desplegable que se expande cuando le doy a un boton, pero el contenido queda por debajo, no se hace a un lado cuando el menu desplegable se abre con un collapse.

    • @yahirsamano6854
      @yahirsamano6854 Před 8 měsíci

      Encontraste la solución solo con css? Por que hace mucho tiempo hice uno asi pero tuve que usar javascript para la animación junto a css

  • @mrdark601
    @mrdark601 Před 4 měsíci

    yo tengo un nav dentro de la etiqueta head en html, nada que ver con el body, pero cuando le doy padding al body, tambien se mueve el nav, lo cual no tiene sentido alguno porque el nav lo tengo en el head. tienes alguna idea de cual podria ser el problema?

    • @EurekaTutoriales
      @EurekaTutoriales  Před 4 měsíci

      Hola, eso te pasa porque el nav no lo puedes meter dentro de la etiqueta head. Entonces el propio navegador corrige el error y la introduce dentro de la etiqueta body.
      Puedes comprobarlo inspeccionando el código, pulsando botón derecho ratón y pulsando en inspeccionar, ahí verás que la etiqueta nav aparece dentro del body.
      Saludos.

  • @williamshung7553
    @williamshung7553 Před 3 měsíci

    Necesito ayuda, cuando utilizo position fixed pierdo la barra de scroll y no puedo bajar subir. quien me puede ayudar?

    • @EurekaTutoriales
      @EurekaTutoriales  Před 3 měsíci

      Hola. Eso te pasa porque tú contenido no supera el tamaño del viewport, es decir de la zona visible en pantalla de tu página web.

  • @ariox4714
    @ariox4714 Před 4 měsíci

    esta mal si uso margin top luego de usar top:0; ?

    • @EurekaTutoriales
      @EurekaTutoriales  Před 3 měsíci

      Hola, tienes que utilizar uno u otro, margin tiene preferencia sobre top.