🔴POSITION en CSS [GUÍA COMPLETA] en ESPAÑOL 🔴 Eduardo Fierro Pro
Vložit
- čas přidán 1. 08. 2024
- 🤘¡Qué pasa crucks! En este vídeo vamos a ver qué es el position en CSS, los conceptos esenciales del position y el flujo en HTML.
Repasaremos los conceptos de etiqueta contenedora y hermana, la colocación de etiquetas y su referencia de colocación.
Definiremos cada position desde que es position static, que es position relative, que es position absolute, que es position fixed y qué es position sticky. También repasaremos reglas nemotécnicas para que puedas usarlos y consejos al usar position.
🔖 TODOS los vídeos de esta SERIE
✓ QUE es el POSITION: • 🔴POSITION en CSS [GUÍA...
✓ CENTRAR etiquetas con POSITION: • 🔵 CÓMO CENTRAR ETIQUET...
✓ CÓDIGO: Centrando etiquetas • 🚀Cómo CENTRAR ETIQUETA...
Si te ha gustado el vídeo dale a like, suscríbete y ¡dale a la campanita! 😊
_______
📹Otros vídeos de mi canal
😊 Vídeos recomendados • 👉Vídeos recomendados
🚀ROADMAP Desarrollo WEB • 🔎ROADMAP de un DESARRO...
🤯 Explicando Web de forma diferente • 😱Explicando conceptos:...
🙇🏻 Construyendo uns Slider, Acordeón, Tabs... • 🤯 Construyendo un Carr...
_______
📚¿Estás buscando un Curso, Máster o Bootcamp sobre desarrollo web?
Soy profesor en la escuela CEI donde imparto Cursos y Másters sobre desarrollo web donde puedes obtener un descuento del 5% en el precio del curso usando el código embajador.eduardofierro
¡Pide información sobre los cursos donde soy profesor desde este enlace!
👉cei.es/?ref=eduardofierropro
_______
✅ Directos en Twitch: / eduardofierropro
✓ ¡Apóyame en CZcams! czcams.com/users/EduardoFierro...
✓ Trucos rápidos en TikTok / eduardofierro.pro
✓ Podcast sobre desarrollo web anchor.fm/eduardofierropro
✓ Programación en Instagram / eduardofierro.pro
✓ Códigos para descargar en Github github.com/eduardofierropro
✓ Noticias sobre web en Twitter / 1325827794627129344
✓ Mi web eduardofierro.pro
_______
🔥Enlaces a productos de mi setup
🖥 Samsung Space Monitor 27" amzn.to/3mABk0R
🖥 LG Ultrawide 25" amzn.to/3XrMwOp
💪 Brazo EarGear amzn.to/3YPPnBF
🖥 Mac Studio M1 Max amzn.to/3xlwqez
💻 MacBook Pro 15" 2019 amzn.to/2XEdeGL
⚡️ Mesa elevable Flexispot amzn.to/3xlwqez
⌨️ HHKB Hybrid Type-S amzn.to/3xlwqez
⌨️ Logitech G915 amzn.to/2Tzy1da
🖱 Logitech MX Master 2 amzn.to/2WZlUZa
💡 Elgato Key Light Air amzn.to/2TzxPus
💡 Elgato Right Light amzn.to/3tWoM62
🎛 Elgato Stream Deck XL amzn.to/3d1cy4n
🎙 Elgato Wave 3 amzn.to/2QsPLbU
🎙 Elgato Wave Pop Filter amzn.to/33ONkU1
✔️ Elgato Soporte Teléfono amzn.to/2RTZatj
🎧 Beats Wireless Studio 3 amzn.to/3YOtDWT
✔️ Corsair ST100 RGB premium amzn.to/3d3hiZY
📱 iPhone 13 Pro amzn.to/3lsPRPI
📱 Motorola G amzn.to/2TzYcjO
📱 Samsung M11 amzn.to/3uTwNKh
🪑 Drift dr500bamzn.to/3kaEHtE
Enlaces en los productos en mi web: eduardofierro.pro/workspace
______
Psss... Si has llegado hasta aquí eres un auténtico CRUCK de la vida. ¿Vemos cuántos somos poniendo "de frontends!!" en los comentarios? 😏
______
Capítulos:
00:00 Introducción
01:14 ¿Qué es el position en CSS?
02:06 Conceptos esenciales del position
02:57 ¿Qué es el flujo en HTML?
03:50 Etiqueta contenedora y hermana
05:07 Colocación de etiquetas
05:58 Referencia de colocación
07:31 Definiendo cada position
08:14 ¿Qué es position static?
08:52 ¿Qué es position relative en CSS?
09:32 ¿Qué es position absolute?
10:00 ¿Qué es position fixed?
10:34 ¿Qué es position sticky?
11:44 Reglas nemotécnicas
11:50 ¿Cuál es la posicion que viene por defecto en todos los elementos HTML?
12:05 ¿Qué es position relative cuáles son sus propiedades y ejemplos?
12:37 ¿Cuándo uso Position Absolute?
13:00 ¿Cuándo uso Position Fixed?
13:11 Cuidado al usar position absolute
13:23 Recuerda poner Relative cuando uses Absolute
13:31 Cuidado con la altura en absolute
14:17 Consejos al usar position
🔥 CONSTRUYE tu PORTAFOLIO de DESARROLLADOR WEB 👉 czcams.com/play/PLJpymL0goBgELkXg-XumuHwS_jijzosF8.html
🙀 ROADMAP de un DESARROLLADOR WEB 👉 czcams.com/play/PLJpymL0goBgFzvCuhEJJ29-x1H_Uo5Esv.html
¡Dale a like y suscríbete si te ha gustado! 😊
Estos videos son oro puro, de verdad no entiendo como no tienen mas visualizaciones
Muchas gracias Arturo!! 😊 Pues poco a poco irán consiguiendo visitas seguro!! 🤘
@@EduardoFierroPro creo que te amo, puro oro de videos
Yo creo que no los ven mucho porque , son pocos los que quieren aprender de verdad , Por eso está carrera es bien pagada ,porque son pocos lo expertos,eso creo
Increíble que este video tenga tan pocas reproducciones es oro puro!
Vaya pedazo de edición de video, nivel profesional total, nada que ver con todo lo que hay por ahí. Muy buenas y amenas las explicaciones, y sobre todo buenas prácticas, sigue así, eres un crack!
Excelente explicación. muy didáctico para entender bien el "position". Saludos desde Perú, un abrazo.
Sos un crack muy bien explicado !!!
Excelente Explicacion!
La calidad de tus videos es impresioannate hermano, muchas gracias por ser tan organizado y bondadoso.
Muchas gracias por el apoyo Cristian!! 😊
Tremendo video, muchas gracias por la claridad y por la producción!!
Edu, he finalizado un curso de CSS y puntualmente necesitaba echarle un repaso a la prop. position, muchas gracias por compartir crack, me ha sido de mucha ayuda!😀
Muchas gracias a ti David por el comentario!!! 😃
Gracias espíritu que me habla a través de la pantalla. Por fin entendí de manera satisfactoria el Position...
Gracias espíritu que me comenta y apoya!
Empresionante la calidad de explicación. Mis dieces
Muchísimas gracias por el comentario Angeles!! 😊
Genial! excelente explicación amigo; ando batallando con esto desde hace mucho, pero tú lo explicaste de maravilla =)
Gracias Edu esto vale oro tomando apuntes!! Abrazoo
Me encanta cómo está explicado. Califico con un 100 este video!
Con este video entendi todo lo que venia estudiado, se me había hecho un embrollo. Muchas gracias.
excelente video!!!
Muy buen video, sinceramente la mejor explicación de youtube español. Mis respetos hombre, me aclaraste las dudas de horas de busqueda en solo 15 minutos.
Me ha gustado mucho el video. Se conoce el tema, lo explica muy bien y lo transmite con recursos bien preparados. Enhorabuena.
De verdad que cada vez aprendo mas contigo. Explicas esto de una forma muy senciall, me havbía tomado tiempo entender todos estos conceptos y lo he logrado gracias a ti. Te quiero
Muchas gracias cruck! Pues ahora toca usarlos!! 💪🏼
Excelente explicación, eres un genio
Qué crack! Menudo pedazo video que te has marcado!! 😍👍💪
Muchas gracias Jordi!!! 😊
de frontends!! gracias por todo el conocimiento compartido!
jajajaja gracias Julia!! 😊
Buenisimo!!!
No se qué pasa que siempre los creadores dicen que pondrán recomendaciones en la esquina, peor hace mucho deje de ver que salían las recomendaciones, es asi, o es que al final olvidan ponerlas?
En cuanto al contenido, BRUTAL! Desde que conocí este canal, no paro de verlo, las explicaciones son de primera categoría, ni cursos de pago he visto con explicaciones tan detalladas y claras. Se lo recomendaré a mis alumnos!
Esplendido !!! fácil y rápido de entender🔥✨
Muchas gracias por el comentario Kodo!! 😊
Maravilloso!
Muchas gracias Samantha!! 😊
Excelentísimo vídeo! Muy resumido y una manera de enterder los positions para que nunca se te olvide!
Muchísimas gracias Carlos!!!😊😊
Que excelente material, recién descubro este canal y me han gustado mucho tus videos, seguí así! Te ganaste un nuevo suscriptor 😁
Muchísimas gracias Andrés por esa sub!! 😊 Espero que te sirvan los vídeos que vienen! 🤘
muy bien explicado! genio
Muchas gracias Fé.deRico!!! 😊
El mejor video de CSS que he visto. Excelente. Muchas gracias.
Muchísimas gracias Fundación!! Espero que te sirva!! 😊
joder, aun no he acabado y es la mejor explicación del tema position que me tenia loco (además veo de entenderlo mal y al revés... no sé como a veces me funcionaba jaja), ahora creo que ya por fin las podré utilizar bien y si por lo que sea no las utilizo en un tiempo me guardo el video para venirlo a ver de nuevo que toy sin herramientas para tomar notas :) muchisimas gracias por currartelo tanto!
Muchísimas gracias por el comentario!! Es cosa de practicarlo y tener la teoría clara para que la práctica sea lo más sencilla posible 😊 P.D.: Ya veo que estás pasándote por mi canal en muchos vídeos!!!😊
Excelente explicación!!!!
Muchas gracias por el comentario Javier!!!😊
gracias, te felicito, explicas muy bien, Dios te bendiga
Muchas gracias Graciela!! 😊
Excelente vídeo. Muchas gracias por tu esfuerzo al hacer este material. Esta muy interesante y muy bien explicado. El mejor que he visto hasta ahora.
Saludos
Muchísimas gracias 21DMG 😊
Mil gracias Edu, tanto el contenido como la explicación de 10 :))
Muchísimas gracias LP Draft!! 😊😊😊
Una locura de bueno Eduardo!!!
Muchas gracias!!!!
Muchas gracias a ti por el apoyo Sebastián! 😊
Excelente video!!
Muchas gracias Tovar! 😊
Excelente explicacion 👏
Muchas gracias Skywalker!! 😊
Excelente manera de explicar la más completa que he hallado
Muchas gracias HH!! 😊 Me alegro que te haya servido!! 😊
antes de ver este video ya me había visto 5 tutoriales pero con este acabe de entender todo gracias por el video me ayudaste muchísimo
Me alegro que te haya servido!! Ahora a darle uso 😊
Que elegancia la de francia, me ayudo mucho sinceramente se nota que sos docente de algun lado. Muchas gracias
Muchas gracias Aramis!! 😊
Esta muy bueno esta clase, mil gracias.
Me alegro que te guste Elizabeth!! 😊
Muy buen video!!!
Muchas gracias Brian!! 😊
Increíble explicación, muy didáctico y bien explicado. Muchas gracias por la dedicación!
Muchas gracias Francisco!! 😊
Buen video saludos desde Colombia 🇨🇴
Muchas gracias Francisco!! 😊
acabo de conocer tu canal con este video. Clarisimas tus explicaciones, quiero agradecerte por eso! ya que el tema del position es fundamental y no es del todo facil de entender. seguire con tus otros videos para seguir aprendiendo
Muchísimas gracias Kraken!!! 😊 Como bien dices el position es esencial y por eso creo que esta explicación os puede ayudar tantísimo 😊
Excelente video! Personalmente me da mucho problema usar el position por qué me es confuso. Pero ya con este video me es más claro, y si se me olvida vuelvo a verlo
Me alegro Daniel!! Y esta semana se viene otro de centrar etiquetas y el viernes todo esto explicado con ejemplos de código 😊
Que nivel para explicar mejor no puede haber muchas gracias.
Muchas gracias Mario!!!😊
Un millón de gracias por este video. La verdad es que soy nueva programando y todo el tema de position me volvia loca, porque no lo lograba entender del todo, pero con este video ya me ha quedado todo más claro. Un millón de gracias 😊😊😊
Un millón de gracias por tu comentario Paula!! 😊😊
Toma like maquina!
Muchas gracias Andrés!!! 🔝
Muy buen video 👍👍👍
Muchas gracias Alain!! 😊
genial, todavia me cuentas comprenderlo pero me ayudaste un montón
Con la práctica se asimila!! No te preocupes!! 😊
Muy buena explicación. Gracias por el aporte estoy comenzando en este mundo y este curso es expectacular
Muchas gracias a ti César por tu apoyo!! 😊
Gracias. Te consulto que me sugeris para estudiar css porque como estoy incursionando me cuesta bastante. Para afirmar conocimientos
Sabes que hermano??. Te voy a decir algo con toda honestidad...eres un fuck![\]g crack!!!!....he visto muuuchos videos hablando de este tema, pero ninguno como éste....acabo de descubrir tu canal y ya hoy de mi parte has ganado un like, éste comentario y un nuevo suscriptor....voy a terminar de ver que más tienes por aquí 😁....me cuesta mucho trabajar con animaciones keyframes y todo eso...espero encontrar algo, sino lo esperaré en un futuro 👍👍👍
Que bien explicado! Que gusto. Me lo guardo para cuando inevitablemente me olvide de algo :P
All right!! Úsalo con moderación! 🤘🏼
"de frontends!!" Jaja
Explicas super bien y el video se ve de una calidad super profesional. Muchas gracias por toda esa gran dedicación amigo!
Jajajaja grande Jay!! Muchas gracias por ver la calidad!! 😊
muy didáctico
Muchas gracias Aldux! 😊
Muy buena calidad
Muchas gracias Akka 😊
no entiendo porque este video solo tiene 124 me gusta xD
muchisimas gracias, estoy viendo muchos de tus videos y me estan ayudando mucho a entender el tema del posicionamiento en CSS :)
jajaja poco a poco Iris!! 😊 Muchas gracias por tu apoyo!
Es por que no dio ningún ejemplo en acción .... nomas te quedas imaginando los ejemplos/escenarios posibles .
Te descubrí hace poco y no paro de ver tus videos! Donde puedo descargar la imagen de los position? la que tu creaste ? Hay alguna comunidad en DC?
No lo entendia, de joven jugaba a hacer paginas web de juguete y lo deje. Ahora con 33 años quiero cumplir esa meta y por fin entiendo el *position*. Muchisimas gracias!
Me alegro mucho Abel!! 😊
Hola Eduardo, me ha encantado como has explicado el video! =D Pero me ocurre un problemilla y no se como resolverlo. He estado practicando con position absolute y relative para poner un icono al final de un texto (yo se que sin ver el código es super difícil) pero ocurre que al redimensionar la pantalla para comprobar el responsive, el texto cambia de tamaño y el icono se queda donde estaba, entonces aparece por ahí por medio de la pantalla. Habría alguna manera de que se quedara "quieto o pegado" el icono al final del texto como lo tengo en principio al redimensionar la pantalla?
Gracias por adelantado.
Saludos y mucho animo que me encantan tus videos! =D
@EduardoFierroPro cuando dices que no acepta float y flex, también se da por entendido que tampoco acepta grid verdad ?
tus videos son calidad
tendrás cursos completos para comprarlos?
Muchas gracias Luiggi!! Pues no de momento, pero algo se está gestando 😊
muy bueno! podrias poner un link con los slides del video? igual hice screenshots jaja, muy bueno gracias por todo lo que haces.
Se vendrá PDF con toda esta info la próxima semana 😊 Lo pondré en la descripción y avisaré por la comunidad 😊
Saludos Eduardo tus explicaciones son excelentes. Solo te pido que lo acompañes con código aunque sean ejemplos sencillos. Mil gracias.
En algunos vídeos lo hago, me queda el vídeo con código de Position que se viene en breves 😊 Gracias por el apoyo!
@@EduardoFierroPro Sigo viendo tus vídeos y definitivamente eres maravilloso explicando. Te busqué en Twitter para recomendar tu canal pero no lo encontré. En serio te mereces miles de "me gusta".
I am facing something very random with position sticky. If the container has display: relative and, here is the issue, overflow: hidden, the sticky position does not work. Any idea what the heck is going on with the document flow in this particular case?
donde se encuentran los dos videos que le siguen y nombras al principio del video?
Están en la descripción pero aquí te los dejo 😊
✓ QUE es el POSITION: czcams.com/video/FLet5o2ecE8/video.html
✓ CENTRAR etiquetas con POSITION: czcams.com/video/5c-3hFjEvTo/video.html
✓ CÓDIGO: Centrando etiquetas czcams.com/video/-xQ_SjDsGK4/video.html
🔔👈😊👏
🔝🔝🔝
Eduardo, ciertamente tu canal es de peso y tus explicaciones son magistrales, pero para la referencia de la fecha del vídeo hablar de float? ... por Dios me confundo!
Porque es una Guía completa! Y por desgracia cuando hacemos mantenimiento de una web nos encontramos con floats 😭
que es coje? en mi pais argentina es tener relaciones sexuales por eso estoy confundido