CURSO de CSS 2021 Rapido y Facil # 13 | 💻 POSITION
Summary
TLDREn este episodio del curso de CSS, el instructor Leon aborda el tema de las posiciones en CSS, que es fundamental para crear estructuras más complejas. Explica los diferentes tipos de posicionamiento: estático, relativo, fijo y absoluto. Muestra cómo cada uno afecta la ubicación de los elementos en la página y cómo se pueden combinar para lograr diseños precisos. Utiliza ejemplos prácticos, como un botón 'Inicio' que se mantiene fijo en la pantalla, y un contenedor que actúa como caja padre para elementos posicionados de forma absoluta dentro de él. El video es una guía valiosa para comprender y aplicar correctamente las posiciones en el diseño web.
Takeaways
- 😀 El curso de CSS aborda el tema de las posiciones para crear estructuras más complejas en la página web.
- 📍 Se explican los diferentes tipos de posicionamiento: estático, relativo, absoluto y fijo.
- 🔵 El posicionamiento estático es el valor predeterminado y los elementos se posicionan según el flujo normal del documento.
- 🔵 El posicionamiento relativo permite desplazar un elemento dentro de su posición original sin afectar a otros elementos.
- 🔵 El posicionamiento absoluto coloca un elemento en una posición específica dentro de su contenedor padre, que debe ser relativo.
- 🔵 El posicionamiento fijo mantiene un elemento en una posición fija en la ventana del navegador, independientemente del scrolling.
- 🎨 Se utilizan propiedades como `border`, `font-size`, `color` y `background-color` para dar estilo a los elementos y facilitar su identificación.
- 🔢 Se ejemplifican los cambios en las posiciones con valores numéricos, como píxeles, para desplazar los elementos dentro de la página.
- 🔧 Se resalta la importancia de entender cómo interactúan los diferentes tipos de posicionamiento para organizar correctamente los elementos en la página.
- 🔄 Se menciona que el posicionamiento absoluto puede ser complicado de entender y aplicar, pero es útil para posicionar elementos de manera precisa dentro de un contenedor.
Q & A
¿Qué es la propiedad 'position' en CSS y por qué es importante?
-La propiedad 'position' en CSS permite controlar cómo se posicionan los elementos dentro de un contenedor. Es importante porque permite la creación de estructuras más complejas y la colocación de objetos en lugares específicos de la página web.
¿Cuáles son los diferentes valores que puede tomar la propiedad 'position'?
-Los valores que puede tomar la propiedad 'position' incluyen 'static', 'relative', 'absolute' y 'fixed', cada uno con comportamientos de posicionamiento diferentes.
¿Qué significa la posición 'static' y cómo se comporta?
-La posición 'static' es el valor predeterminado en CSS, y los elementos con esta posición se posicionan según el flujo normal del documento, sin posibilidad de desplazamiento con propiedades como 'top', 'right', 'bottom', 'left'.
¿Cómo se diferencia la posición 'relative' de la posición 'static'?
-La posición 'relative' permite desplazar el elemento con respecto a su posición original, pero sigue respetando el flujo normal del documento y no desplaza a otros elementos.
¿Qué es la posición 'fixed' y en qué se utiliza?
-La posición 'fixed' mantiene el elemento fijo en la ventana del navegador, sin moverse cuando el contenido se desplaza. Se utiliza comúnmente para elementos como barras de navegación o botones de 'volver al inicio'.
¿Qué significa la posición 'absolute' y cómo afecta a los elementos dentro de un contenedor?
-La posición 'absolute' posiciona el elemento en relación con el primer ancestro posicionado (no static), permitiendo desplazamientos libres. Dentro de un contenedor con posición 'relative', los elementos 'absolute' se posicionan en relación con ese contenedor.
¿Por qué es necesario un contenedor con posición 'relative' para utilizar la posición 'absolute' dentro de él?
-Un contenedor con posición 'relative' establece un marco de referencia para los elementos 'absolute' dentro de él, permitiendo así una organización más precisa y controlada de los elementos posicionados.
¿Cómo se aplica la propiedad 'position' en un elemento HTML para que se quede fijo en la pantalla?
-Para que un elemento se quede fijo en la pantalla, se le aplica la propiedad 'position: fixed;' y se le especifican los valores de 'top', 'right', 'bottom' y 'left' para determinar su posición exacta.
¿Qué es un 'box model' en CSS y cómo se relaciona con la propiedad 'position'?
-El 'box model' en CSS se refiere al modelo de caja que rodea cada elemento, compuesto por márgenes, bordes, relleno y contenido. Se relaciona con la propiedad 'position' porque la posición y el tamaño de los elementos se ven afectados por este modelo.
¿Cómo se utiliza la propiedad 'margin' en conjunto con la propiedad 'position' para ajustar la posición de un elemento?
-La propiedad 'margin' se puede utilizar para crear espacio alrededor del elemento, y en conjunto con la propiedad 'position', se puede ajustar la posición relativa del elemento dentro de su contenedor o en la ventana del navegador.
Outlines
💻 Introducción a las posiciones en CSS
El vídeo comienza con una introducción al tema de las posiciones en CSS, explicando que hasta ahora se han creado estructuras simples y que para crear estructuras más complejas es necesario entender la propiedad 'posición'. Se mencionan los atributos 'estático', 'relativo' y 'absolute'. Se procede a borrar todo lo anteriormente creado en el editor y se crea un párrafo de ejemplo con una clase llamada 'estático'. Se le da un estilo que incluye un texto de 45 píxeles, un borde rojo de 4 píxeles y se ajusta el tamaño del texto. Se explica que el posicionamiento 'estático' es el valor por defecto y que los elementos estáticos se adaptan a la página según su posición en el código HTML.
🔄 Posicionamiento Relativo y sus diferencias
Se explora el posicionamiento 'relativo', que se asemeja al 'estático' pero permite aplicar cambios adicionales. Se crea un segundo párrafo con la clase 'relativo' y se le da un borde azul de 4 píxeles. Se muestra cómo los elementos con posicionamiento 'relativo' pueden ser modificados en el navegador, como cambiar su 'top' o 'left', y cómo esto afecta su posición en relación con su posición original. Se menciona que los elementos 'relativo' no se adaptan dinámicamente como los 'estáticos'.
🔗 Posicionamiento Fijo para elementos inamovibles
Se introduce el posicionamiento 'fijo', que mantiene un elemento en una posición específica de la pantalla, independientemente de la cantidad de desplazamiento. Se crea un elemento 'h1' con un estilo que incluye un borde rojo, texto en blanco y un fondo marrón. Se ajusta su ancho y se centra el texto. Se le aplica la propiedad 'fixed' para que el elemento se mantenga fijo en la pantalla. Se sugiere su utilidad para crear un botón 'volver al inicio'. Se agregan varios párrafos para demostrar cómo el elemento fijo se mantiene en su lugar mientras los demás se desplazan.
🧩 Posicionamiento Absoluto dentro de un contenedor
Se explica el posicionamiento 'absoluto', que requiere de un contenedor con 'position: relative' para funcionar correctamente. Se crea un contenedor con un borde rojo y se ajusta su ancho y alto. Se agregan dos elementos, 'h1' y 'h2', dentro del contenedor. Se le da a 'h1' un posicionamiento 'absolute' y se ajusta su posición con 'top' y 'left'. Se hace lo mismo con 'h2', mostrando cómo se pueden posicionar ambos elementos de manera libre dentro del contenedor. Se enfatiza la importancia de entender cómo posicionar objetos dentro de un contenedor para aprovechar al máximo el posicionamiento 'absolute'.
Mindmap
Keywords
💡CSS
💡Posición
💡Estático (static)
💡Relativo (relative)
💡Fijo (fixed)
💡Absoluto (absolute)
💡Contenedor
💡Párrafo
💡Clase
💡Borde
💡Ancho (width)
Highlights
Introducción al tema de las posiciones en CSS para crear estructuras más complejas.
Explicación de la propiedad 'position' y sus atributos: static, relative, fixed y absolute.
Cómo el posicionamiento estático es el valor por defecto y cómo funciona.
Diferencia entre los elementos estáticos y cómo interactúan entre sí.
Uso del posicionamiento relativo y su comparación con el estático.
Ejemplo práctico de cómo se ve un elemento con borde azul utilizando el posicionamiento relativo.
Cómo el posicionamiento fixed mantiene un elemento fijo en la pantalla.
Demostración de un botón 'Inicio' que se mantiene fijo en la pantalla con fixed.
Introducción al posicionamiento absolute y su complejidad comparado con otros métodos.
Necesidad de un contenedor con posición relativa para utilizar el posicionamiento absolute.
Cómo posicionar elementos dentro de un contenedor utilizando absolute.
Ejemplo de cómo mover un elemento H1 dentro de su contenedor utilizando 'top' y 'left'.
Importancia de la propiedad 'box-sizing' para controlar el ancho y el borde del contenedor.
Conclusión del episodio y anticipación al siguiente tema del curso de CSS.
Transcripts
[Música]
hola
en el amigo si estamos de regreso con
nuestro curso de css soy yo lion y hoy
vamos a tocar el tema de las posiciones
hasta el momento simplemente lo que
hemos hecho es poder hacer estructuras
muy simples pero para poder tener
estructuras un poquito más complejas
tenemos que utilizar la propiedad
posición de esta manera entonces en este
episodio vamos a conocer las que tienen
de atributo estático relaté pixel y
absolute ok y bien manos a la obra para
ver lo que vamos a hacer el día de hoy
bien antes de empezar vamos a borrar
todo lo que hicimos en nuestro anterior
episodio son se quedan simplemente con
el body vacío ok controles y acá también
vamos a volver todo exceptuando el
estilo que otorgamos al body también
controles bien hoy vamos a ver el tema
de las posiciones un tema muy importante
porque gracias a esto vamos a poder
poner objetos en el lugar que veamos
conveniente ok bien para empezar vamos a
ver el primero que lleva de nombre
estático yo lo voy a comentar así
estático el primer elemento que vamos a
ver de hecho acá en index.hu tml lo que
yo voy a hacer es trabajar con un
párrafo y desde llenarlo presiono
controles y acá ya hablo podemos
visualizar bien vamos a llamarlo de
hecho para poder identificarlo de una
mejor manera en este párrafo
yo voy a darle una clase
yo voy a llamarlo por su nombre es
estático ok para poder identificarlo con
este valor y entonces acá en estilo css
vamos a llamar precisamente a esa clase
de nombre estático
muy bien dentro de estático lo primero
que voy a hacer es poner un texto aún
más grande voy a llamarle 45 píxeles
ok punto y coma controles en que también
1 html control s para guardar la
propiedad acá está mejor bien para
empezar en esta primera parte lo que yo
voy a hacer es darle un límite o un
borde a este objeto para que de esta
manera sepa de dónde a dónde comienza
que entonces acá voy a darle un border
en este caso de 4 píxeles ok que sea de
color rojo para llamar la atención y que
ese borde sea totalmente sólido control
s
ahí está ya lo podemos ver mejor y de
hecho esta es la forma en el cual vamos
a poder trabajar de una mejor manera
porque estamos sabiendo de dónde a dónde
comienza y finaliza este objeto ok bien
esa facilidad entonces vamos a trabajar
composición ok en este caso lo que
hacemos es escribir la propiedad
posición y en este caso ésta
punto y coma y se presiona controles ya
a simple vista no con notamos ningún
cambio porque se puede decir que por
defecto el elemento static ya se toma
posicionado dentro del navegador en este
caso yo no tengo nada dentro del
navegador por tanto por defecto ocupa el
primer lugar en la parte superior ok si
hubiese otros objetos va a tratar de
acomodarse ok salvo alguna diferencia
que vamos a ver más adelante pero
simplemente eso de hecho acá qué te
parece si trabajamos con un párrafo o
mejor dicho vamos a copiar todo esto
para ser lo más rápido
ok control de control ese y ya lo
podemos verlo y al tener la misma
posición estática entonces deben
convivir que cada uno respete el límite
del otro y eso es muy importante entre
los elementos estáticos pero actualmente
tenemos muchos elementos que ya no es
necesariamente estático en ese caso
vamos a ver otra de nombre relative
el elemento relativa es muy parecido al
estático podríamos decirlo que es casi
lo mismo pero la diferencia lo vamos a
ver precisamente cuando nosotros
queremos darle otro tipo de propiedad ok
para que me entiendas en este caso qué
te parece si este párrafo lo vamos a
relacionar con static ok y este párrafo
con relativo entonces acá yo voy a
cambiar de nombre para diferenciarlo
vamos a ponerle el nombre es relativo ok
y acá vamos a trabajar precisamente con
este párrafo de clase relativo
el archivo ok bien en este caso vamos a
mantener el phone sites que vamos a
pegarlo a cabo controles en no pasa nada
pero vamos a diferenciarlo por el borde
que es en este caso el borde de la misma
manera de 4 píxeles pero esta vez que
sea de color azul blog también sólido
punto y coma controles ya que no ha
habido cambios porque acá en html se me
olvide guardar voy a presionar controles
y acá también y ahí lo tienes okey
recuerda controles acá control es seca
muy bien y si trabajamos con el
navegador o jugamos de esta manera
obviamente pueden convivir en primer
lugar como ya les mencioné tanto real a
tipo como static son básicamente lo
mismo salvo cuando yo quiero modificar
en este caso miren a camps voy a darle
la propiedad de position
abdellatif punto y coma controles y si
juego con mi navegador ok
conviven pero como se mencionó
anteriormente
qué pasa si doy algunas preferencias en
este caso voy a decirle a un led de 30
píxeles punto y coma controles ok voy a
tratar de mover mi navegador y
obviamente ya no es el mismo mire en
esta parte porque miren voy a tratar de
agrandar ok miren acá ya no puedo ver
este límite eso sería una desventaja de
hecho acá voy a tratar de trabajar en lo
alto con 80 píxeles punto y coma
controles en y de la misma manera
ya no podemos ver el total precisamente
de este párrafo aquí entonces
básicamente relativo nos puede servir
como una caja padre más adelante les voy
a decir qué quiere decir eso de caja
padre pero quiero que sepas que cuando
trabajas con relativo el único
inconveniente es cuando ya quiero darle
algunos atributos de más no vamos a
poder trabajar de la misma manera que
con un static que se va adaptando según
las circunstancias a diferencia de un
relativo donde donde básicamente no va a
poder adaptarse a la situación bien
vamos a borrar todo esto y ahora vamos a
ver otra propiedad controles seca
controles cerca ahora qué te parece si
vemos el tema de píxel
[Música]
qué quiere decir esto de fixed que iba a
tener un objeto en una sola posición y
no va a moverse para nada que se va a
quedar estático firme y fijo que
básicamente es el nombre fijo ok acá lo
que yo voy a hacer que te parece a un
8-1
y dentro de html yo voy a decir
primeramente está objeto h 1 simplemente
con el nombre de inicio
para que me puedas entender mejor inicio
si presiona controles en ese objeto se
viene acá y voy a llamarle precisamente
en estilo css voy a darle un h 1 ok
en este caso voy a darle un font sites
que te parece de algo que se pueda ver
80 píxeles punto y coma controles a se
ve perfecto vamos a darle que te parece
un borde
en este caso que sea de 3 píxeles que
sea de color rojo recto
y que también en este caso sean sólidas
punto y coma vamos a cambiar el color de
texto a blanco para que combine con el
rojo
y si presiona controles en ella podemos
verlo
vamos a darle un background color en
este caso de color brown
punto y coma controles en y se ve mejor
qué te parece si limitamos el contenido
en este caso te voy a decir que el ancho
el with simplemente sea de 100 píxeles
control s hoy está muy pequeña entonces
voy a subirlo a 150 controles en aún más
gente parece a 200
perfecto de hecho voy a aumentar un
poquito más 220 controles y acá yo voy a
decirle aunque te parece un text align
center para que se vea mucho mejor
bien básicamente como un botón aunque no
lo es y bien para que esto funcione como
quiere decir la propiedad fixed acá
después de la chía 1 yo voy a traer
varios párrafos logran gibson ok
entonces lo que yo voy a hacer es
simplemente copiar este párrafo y voy a
pegarlo a unas 5 veces 1 2 3 4 5
ok ahí están mis cinco párrafos
controles y ahí lo podemos ver
acá voy a llamar a párrafo
simplemente acá vamos a darle la
propiedad de font sites qué te parece
de 30 píxeles punto y coma controles y
ahí está ok hasta el momento no vemos
nada diferente hemos creado simplemente
varios párrafos por tanto aquí está
voy a subir lo que te parece a 35 para
que parezca que tengamos muchos ok y
ahora es donde va a entrar en acción la
propiedad física dentro de posición
miren acá en el h1 a este elemento voy a
darle precisamente posición fix it
position
en este caso pixel
muy bien y lo que quiere decir fixed
miren controles es que el objeto se va a
quedar fijo
y miren puedo desplazarme por todos los
párrafos pero este objeto se queda fijo
no se mueve y esto generalmente es muy
útil para esa opción que tenemos donde
queremos volver al inicio un botón donde
básicamente si damos un clic nos vuelve
a la primera parte de arriba
bien entonces ya sabes la utilidad que
puedes darle a posición fixed ok dejar
un objeto fijo que parece que está sobre
encima de cada uno de los objetos bien
ya para terminar este episodio vamos a
borrar todo esto vamos a ver el más
complicado de todos que vamos a volver
todo esto y acá dentro de los
comentarios voy a poner la propiedad
absoluta bien este es el más complejo de
aplicar básicamente porque también es
difícil de comprender lo que nos ayuda
sólo desea acomodar un objeto donde yo
vea conveniente salvo que esté dentro de
otra dentro de otro objeto que pueda
contenerlo ok voy a presionar controles
era acá controles acá y bien en el caso
de la salud lo que yo voy a hacer es
trabajar como una especie de contenedor
para que esto funcione tiene que estar
en un contenedor o en una caja padre
como te mencioné anteriormente y
absolute van a ser como los elementos
que pertenecen dentro de esa caja padre
o podría llamarle también como una caja
hijo ok bien lo primero que voy a hacer
es acá trabajar con un contenedor clip
ok y dentro de este tipo de hecho voy a
darle un nombre class que te parece si
voy a llamarle el contenedor
y en este caso este contenedor dentro de
las etiquetas que vamos a escribir qué
te parece si pongo simplemente en h1
en este caso voy a llamarle html en la
etiqueta uno y acá voy a traer la noche
2
ok simplemente css como nombres si
presiona control s acá ya podemos
visualizarlo obviamente el elemento más
grande y seleccionó y el elemento más
bajo o de menor tamaño es el h2 hasta el
momento nada del otro mundo de hecho
vamos a darle algunas propiedades para
poder distinguirlo ok vamos a llamarle
precisamente a esa clase contenedor y
para poder limitar básicamente qué
contiene este elemento voy a darle un
borde y eso nos ayuda bastante ok los
voy a poner un border en este caso de
tres píxeles vamos a pintarlo de color
rojo ok y que sea el borde sólido punto
y coma con relación a y lo podemos ver
de hecho para este ejemplo yo voy a
limitar tanto la anchura como la altura
ok
en este caso acá yo voy a decir
precisamente que la altura del hate sea
de 600 píxeles punto y coma
y que el ancho el wheat tenga
básicamente un ancho de 700 píxeles por
poner un ejemplo así control s ahí está
que ya no lo podemos ver ok lo
importante es que podemos visualizarlo
todo lo mejor que se pueda
ok una vez hecho esto bien para poder
verlo mejor tuviera otorgaron margin top
en este caso que te parecían de 30
píxeles 30 píxeles punto y coma
control s
ok ahí tenemos el espacio pero en este
caso yo necesito que este contenedor
funcione como una especie de caja que
contenga para que funcione bien yo
necesito poner la propiedad ojo la
propiedad de posición en este caso
relativa punto y coma muy bien si
presiona controles ya no vamos a notar
ningún cambio pero en si el efecto ya
está hecho lo que estoy diciendo es que
básicamente este objeto tenga una
posición relativa que dentro de esta
posición que a la vez es relativa voy a
poder introducir otra posición en este
caso para h html y css para poder poner
estos objetos en el lugar que yo voy a
conveniente pero ojo tiene que estar
dentro de este marco
ok y para no tener ningún inconveniente
no está de más poner un box sightseeing
border box para controlar básicamente
este tipo de anchura o este borde que
hicimos por demás muy bien ahora donde
trabaja el tema de absolut bien como ya
te mencioné ahora el absolut tiene que
trabajar dentro del objeto de posición
relativa o sea dentro de este margen
entonces lo que yo puedo hacer es acá
decir lo siguiente primeramente voy a
entrar me al contenedor y seguidamente a
uno de esos dos elementos el primero que
sería html uno que entonces a h1
y dentro de sus propiedades yo voy a
decirle primeramente que necesito que
esté en una posición absoluto gain punto
y coma controles y mi objeto está acá
por defecto yo en este caso voy a decir
lo siguiente voy a decirle en la parte
de arriba que tenga una diferencia de
100 píxeles punto y coma control s ahí
está miren se puso en esa posición 100
píxeles también puedo decirle
leaf de 200 píxeles
control s y se desplazó 200 píxeles ok
entonces de esta manera el posición
absoluta dentro de un relativo vas a
poder acomodar en el lugar que tuve es
conveniente también puedo hacerlo con el
h2 que incluyó poner acá punto
contenedor h 2 abrimos llaves y acá
vamos a dar la posición primeramente de
posición
absolute punto y coma también voy a
decirle en el top en este caso sea de
150 píxeles punto y coma
controla ese ahí está
ok para poder verlo mejor también voy a
decirle que el leaf
o sea de 500 píxeles vamos a ver qué
pasa
control dice y se pone en esta dirección
ok faltando los 200 que sigue el ancho
total de 700 píxeles bien entonces
básicamente es eso cuando quieras
posicionar un objeto de una manera libre
y precisa entonces tú tendrías que
trabajar con una especie de contenedor y
dentro de este contenedor para adicionar
todos los demás objetos tanto el h1 como
el h2o o el paso fort lo que tú veas
conveniente y posteriormente a esta
estructura que tengas como base ok
tienes que poner también la opción de
absolut dentro de él ahora el ático gay
con las propiedades que tú veas
conveniente ok espero que esta parte que
ha quedado claro porque generalmente eso
lo que viene ya la confusión no podemos
trabajar básicamente con objetos porque
no sabemos cómo posicionar los ok pero
bien en la práctica final que vamos a
hacer al finalizar este curso de css
básico vas a poder darte ya una idea
básica de lo que quieres construir a
base de estos objetos que vienen sido
todo por ahí nos vemos
siguiente episodio de tu curso de css
[Música]
Browse More Related Video
5.0 / 5 (0 votes)