Posicionamiento + Dinámica: ¿Cómo se vería?

mix-blend-mode
La propiedad mix-blend-mode define cómo debe combinarse el contenido de un elemento con su fondo. Por ejemplo, el texto de un <h1> podría mezclarse con el fondo detrás de él de formas interesantes.
Examples of uses

Admito… que sí he hecho el típico: z-index: 900000000000000 jajaja, ahora entiendo, realmente el problema ya no es tanto mirar en CSS, sino mirar en HTML para ver que todo esté correcto.
.
PD. Acerté todos los quieces wuuuu:3

NOTA: el eje “Z” (Profundidad) se comporta como las capas en photoshop o en ilustrator

La foto es viejita pero ahí se entiende 😄

actualizen el curso a un curso 100% practico

La dinámica me deja igual, por favor que sean más prácticos en las clases, sobre todo en cosas como CSS que de por si puede ser confuso y luego en estas clases de “puro texto”. Yo entiendo que también están los recursos, pero para eso mejor busco yo los temas en YT.

no me gusta esta modalidad. dislike para teffcode, like para diego degranda… aun asi sivren muchos estos cursos, pero creo que podrian ser mejores

⏬ Posicionamiento

mix-blend-mode

La propiedad mix-blend-mode define cómo debe combinarse el contenido de un elemento con su fondo.

• Todo son cuadros en nuestros sitios web

  • Podemos controlar el tipo de cuadro que se genera utilizando la propiedad display

• Positions ⇒ Nos ayudan a manipular la ubicación de un elemento

  • En la parte superior
  • Uno alado de otro
  • Uno encima de otro ⇒ Estaremos hablando de contexto de apilamiento

  “El contexto de apilamiento es la conceptualización tridimensional de los elementos HTML a lo largo de un eje-Z imaginario relativo al usuario que se asume está de cara al viewport o página web. Los elementos HTML ocupan este espacio por orden de prioridad basado en sus atributos.”

  • Cuando trabajamos con la web debemos trabajar con 3 ejes
    • Ejes X & Y
    • Eje Z imaginario ⇒ Desde la pantalla hasta la vista del usuario
      • Cajas que se van sobreponiendo
      • Ejemplo ⇒ Un modal se pone encima de todo nuestro sitio web
  • El contexto de apilamiento es como una pila que se va ubicando por orden de prioridad
    • No todos los elementos pueden crearlo
  • Un contexto de apilamiento es formado, en cualquier lugar del documento, por cualquier elemento que:
    • Sea el elemento raíz (HTML)
    • Tenga posición (absoluta o relativa) con un valor z-index distinto de auto
    • Position: fixed
    • Un elemento flex con un valor z-index distinto de auto, que sera el elemento padre display: flex/inline-flex
    • Sean elementos con un valor opacity menor de 1
    • Elementos con un valor transform distinto de none
    • Elementos con un valor mix-blend-mode distinto de normal
    • Elementos con un valor filter distinto de none
    • Elementos con un valor perspective distinto de none
    • Elementos con un valor isolation igual a isolate
    • Especifican cualquier atributo superior en will-change incluso si no especificas valores para estos atributos directamente
    • Elementos con un valor -webkit-overflow-scrolling igual a touch

• Ejemplo del contexto de apilamiento

“El contexto de aplilamiento es la conceptualizacion tridimensional de los elementos HTML a lo largo de un eje-Z” … Estoy pagando platzi para q me eviten todo eso y me lo expliquen practico, sensillo y sin mercadotecnia.
Miren el curso de react de Kaufman, quiero cursos como ese, donde paso a paso te muestran el funcionamiento del concepto. Aca estas repitiendo la definicion de diccionario de la real academia q no me aporta nada porque nisiquiera se que es una “conceptualizacion tridimensional de elementos”. Si una definicion invoca a 3 ideas nuevas, entonces no suma como definicion, solo suma confusion.
Me sorprende q no hayan filtrado este contenido antes de publicarlo.

el Z-index o el eje Z imaginario se ve de la siguiente forma, desde el punto de vista del ojo humano hacia una pantalla:

De esta forma, entre más cerca este el elemento al ojo humano, mayor prioridad tendrá.

Para comprender el quiz numero 5 y 6 recordemos 2 cosas.
La propiedad display:relative cambia la posición del elemento con respecto al flujo normal (es decir, con respecto a la posición que tendría el elemento normalmente).

El flujo normal de los ejercicios es el siguiente:

.

Podemos cambiar la posición del elemento relativo a su posición original usando las propiedades top, left, right y bottom…

Comparto el código de los quiz para que puedas experimentar cambiando los valores de posicionamiento.
https://codepen.io/Roque9897/pen/VwmrwPd

Ahh… este curso me recuerda a cuando tomaba clases en la U, venia el profe perezoso, ponía unas diapositivas, y nos hablaba de temas nada mas que por cumplir lo que le habían impuesto, y el hablaba y hablaba de temas que la final… no aportaron nada. Ojala y Estefany entienda, que si de ver imagensitas, textos, escuchar argumentos enormes que no me memorizare, lo hubiera hecho en youtube, o como ya hago, leyendo la documentación de los sitios formales, me enredo menos. Seria bueno que manejara algún tipo de contenido único de platzi, y a medida que se avanza con teoría, ir practicando, así, con manos a la obra, y viendo para que sirve y como se usa apropiadamente.

A qui esta la documentación de esta clase. link

La parte que me ayudo mucho a entender el contexto de apilamiento es la parte donde se explica la imagen.

• DIV #4 es renderizado debajo de DIV #1 porque el z-index (5) de DIV #1 es válido dentro del contexto de apilamiento del elemento raiz, mientras que el z-index (6) de DIV #4 es válido dentro del contexto de apilamiento de DIV #3. Así que DIV #4 está debajo de DIV #1, porque DIV #4 pertenece a DIV #3, que tiene un valor z-index menor.

• Por la misma razón DIV #2 (z-index 2) es renderizado bajo DIV#5 (z-index 1) porqué DIV #5 pertenece a DIV #3, que tiene un valor z-index mayor.

• El valor z-index de DIV #3 es 4, pero este valor es independiente del z-index de DIV #4, DIV #5 and DIV #6, porque pertenece a un contexto de apilamiento diferente.

Ufff, no tenia ni idea de eso jajaja, Muy buena la clase

Por si a alguien tiene la misma duda que yo.
Cuando al div se le pone position absolute, automaticamente se cambian algunas propiedades como el width y el right haciendo que se reduzca hasta el tamaño de su contenido

6 de 6, las clases de platzi sirven cada vez mas, cuando hice el curso definitivo de HTML pensé que ya lo tenía todo, y me estrelle con todos los problemas habidos y por haber, los tips y consejos de diego degranda y estefany valen oro el panorama ahora es mucho mas claro que antes.

Les quiero compartir esta pagina para los que quieren entender un poco mas sobre posicionamiento: https://es.learnlayout.com/position.html

Notas de la clase

ejemplo de z-index

Ame esta clase.

me encanta las dinamicas! buenisimas!

Bueno así se ve el z index en la vida real

clarisimo todo! excelente clase

4 / 6 en la dinamica. Practicar y mejorar

https://codepen.io/jaec1146/pen/qBMGVVb

por si quieren practicar

“position: relative” hace que un elemento se posicione en relación a su posición normal en el flujo del documento. Por ejemplo, si un elemento tiene “position: relative” y se le da una “top: 20px”, se desplazará hacia abajo 20px desde su posición original en el flujo del documento. Sin embargo, el espacio que deja el elemento en su posición original en el flujo del documento se mantiene.

“position: absolute” hace que un elemento sea posicionado en relación a su elemento padre más cercano que tenga una posición diferente de “static”. Si ninguno de sus padres tienen una posición diferente de “static”, entonces se posicionará en relación a la ventana del navegador. Un elemento con “position: absolute” se saca completamente del flujo del documento y no afecta al diseño del resto de la página.

En resumen, “position: relative” mantiene el espacio original del elemento en el flujo del documento, mientras que “position: absolute” lo saca del flujo del documento.

Demasiada teoria. -10 puntos.

Me encantó la dinámica, divertida y pedagógica, Me gustaría conseguirme con otras como estas. Gracias.

Resumen:

• Contexto de apilamiento: el orden en el eje z en que se organizan los elementos a mostrar en pantalla.
  contexto de apilamiento = z-index: numero;

• Hay aproximadamente 12 reglas que cumplen algunos elementos para poder estar en este contexto de apilamiento.

• El padre siempre tendrá prioridad de visualizacion frente al hijo en CSS.

• valores z-index: 0 (siendo el menor) y 999 siendo el mayor. o hasta donde la imaginación te dé.

Un pequeño consejo que les puede ser de ayuda es hacer un pequeño active recall (repaso activo) antes de empezar una sesión de estudio aquí en Platzi o en cualquier lugar que quieran aprender.
.
Intenten recitar de su memoria y lógica lo que recuerden sobre los contenidos pasados, para que su cerebro se sitúe en modo “búsqueda” y la información nueva a ingresar sea recibida con menos dificultad porque esta “por esperarse”. Si quieren saber más de AR aquí una ref y un video

Para los que están familiarizados con el mundo del diseño 🤔 el mix-blend-mode es como el modo de fusión en programas como Photoshop, Illustrator, etc. 😁
Aquí un ejemplo:

Ejemplo:
Tenemos 2 hermanos A y B, el hermano A tiene un hijo que es X.

Z-index: 1; Para A
Z-index: 2; Para B
Z-index: 3; para X

Por mas que **X **tenga un Z-index superior a B nunca va a estar por encima de este en el eje Z. debido que su padre es inferior a este.

Todo en la web son cuadros y estos estan representados por nuestro display.

Si hablamos de bloques encima de otro hablamos realmente del concepto de apilamiento, que es:
Es la conceptualiazcion tridimensional de los elementos HTML a lo largo de un eje-z imaginario relativo al usuario que se asume esta de cara al viewport o pagina web. Los elementos HTML ocupan este espacio por orden de prioridad basado en sus atributos.

En resumen cuando trabajamos en la web, tenemos que pensar en 3 ejes. X, Y y Z

Un contexto de apilamiento es formado en cualquier lugar del documento, por cualquier elemento que:

• Sea elemento RAIZ
• Tenga Posicion con un valor z-index distinto de ‘auto’
• Position:Fixed
• Un elemento flex con un valor z-index distinto de ‘autp’ que sea el elemento padre display:flex/inline-flex
• Sean elementos con un valor filter distinto de ‘none’
• Elementos con un valor perspectivo distinto de ‘none’
• Elementos con un valor isolation igual a ‘isolate’
• Especifican cualquier atributo superior en will-change incluso si no especificas valores para estros atributos directamente
• Elementos con un valor -webkit-overflow-scrollling igual a touch

1. A (Block)
2. A
3. B (Position: Absolute lo Vuelve inline)
4. B (Position absolute, se sobre pone)
5. A
6. B

Mis respuestas de la dinámica:
1- A
2- A
3- B
4- B
5- A
6- B

Mis respuestas 😎😅

1. A
2. A
3. B
4. B
5. B
6. B

5/6

A
A
B
B
A
B

me quedaron todas buenas wuuu ^.^

Quedo realmente claro, un tema que desconocía en lo absoluto ¡muy bueno!

3 de 6. Alguien me podria explicar las dos ultimas?

Excelente clase, Resultado 5/6, pero me quedo mas que claro.

1.A
2.A
3.B
4.B
5.A
6.B

Respuestas dinamica
1 A
2 A
3 B
4 B
5 A
6 B

1- A
2- A
3- B
4- B
5- A
6- B

Todo bien con los quices, pero prefiero mucho mas aplicar asi entiendo que es lo que verdaderamente esta pasando.

contexto de apilamiento (eje-z)

orden de apilamiento (eje-z)

waos

muy buen curso si eres novato no lo hagas pero si ya te comiste muchos cursos basicos te va a servir los fundamentos de css y es muy bueno

Me gustó mucho la dinámica de la clase, son típicas pruebas que se realizan en entrevistas, la verdad no me fue también pero me demostro los conceptos que debo repasar.
Me ayudó a darme cuenta de los conceptos que estamos aprendiendo son valiosos.
Saber que la posición relativa mantiene el flujo normal del documento y desplaza el elemento desde su posición de acuerdo a los valores top, left, right y bottom es la clave.

jajajajaja el z-index 9millones.

ya no pago platzi pero me acorde de este curso y todos los de esta tipa que me hicieron perder el tiempo. les digo que es una perdida de tiempo adios

La propiedad CSS mix-blend-mode establece cómo el contenido de un elemento debe combinarse con el contenido del padre del elemento y el fondo del elemento.

El atributo isolation con valor “isolate”, fuerzan un nuevo contexto de apilamiento dentro del contenedor donde es usado, es decir es como si hicieramos un nuevo conjunto de “capas” dentro del contenedor empleado.
fuente

Aquí muestran un ejemplo de isolation igual a isolate o isolation:isaolate https://developer.mozilla.org/es/docs/Web/CSS/isolation

La diferencia entre position absolute y relatiava es que el absolute sobrepone elemenos y position relative no sim embargo puede sobreponer elementos aplicando propiedades como left, top, etc

1 a
2 a
3 b salen del flujo normal
4 b
5 a porque todos tienen position relative y el unico que se sale es el 3 al moverse hacia abajo y tiene una ubicacion mas reciente que 2 y el cuatro hacia abajo y al lado izquierdo.
6 b al no ser relatives su valor en z-index tiende a 0.

Modal:
Una ventana modal es una ventana que se abre en la página web por encima del contenido activo y que luego podemos cerrar haciendo clic con el ratón.

Por esa regla de tres, un background-img es el número z-index más alto

1- A
2-A
3-B
4-B
5-A
6-B

Contexto de Apilamiento

“El contexto de apilamiento es la conceptualización tridimensiional de los elementos HTML a lo largo de un eje-Z imaginario relativo al usuario que asume está de cara al viewport o página web. Los elementos HTML ocupan este espacio por orden de prioridad basado en sus atributos”
MDN
Existen 3 ejes de apilamiento, el eje x, y y el z. Es este último el que da una ilusion de tridimensionalidad en nuestras páginas web. Ya sea que un texto se posiciona encima de un video o una imagen o cuando le hacemos click a un boton y nos muestra una nueva ventana delante de la página web.

Un contexto de apilamiento es formado, en cualquier lugar del documento, por cualquier elemento que:

1. Sea un elemento raiz (HTML)
2. Tenga posición (absoluta o relativa) con un valor z-index distitnto de auto.
3. Positión: fixed
4. Un elemento flex con un valor z-index distinto de auto, que sea el elemento padre display: flex/inline-flex
5. Sean elementos con un valor opacity menor de 1
6. Elementos con un valor transform distinto de none
7. Elementos con un valor mix-blend-mode distinto de normal.
8. Elementos con un valor filter distinto de none
9. Elementos con un valor perspective distinto de none
10. Elementos con un valor isolation igual a isolate
11. Especifican cualquier atributo superior en will-change incluso si no especificas valores para estos atributos directamente.
12. Elementos con un valor -webkit-overflow-scrolling igual a touch

Oh me salió lo hize todo bien
A
A
B
B
A
B

1- A
2- A
3- B
4- B
5- A
6- B

que cursos mas malos, lo siento teffcode pero dejan mucho que desear, siento que estoy perdiendo mi tiempo, estos cursos deben ser práctico con un buen proyecto a lo largo del curso

Muy buenas las preguntas👏

1.- A
2.- A
3.- B
4.- B
5.- A
6.- B

A
A
B
B
A
B

Hay que revisar estas clases, realmente se me hizo muy complejo seguir todo sin ver como aplicar cada tema enseñado.

Se necesita un poco de live coding.

hizo falta algo de practica en Vs code .

1 = A
2 = A
3 = B
4 = B
5 = A
6 = B

1. a
2. a
3. b
4. b
5. a
6. b

6/6

1. A
2. B - X
3. B
4. B
5. A
6. A - X

Dos respuestas incorrectas, pero lección aprendida.

Si tienes problemas con el z-index, revisa el HTML.

Respuestas:

1. A
2. A
3. B
4. B
5. A
6. B

interesante, porfín aprendi de absolute y relative

Respuesta Dinámica:

• A
• A
• B
• B
• A
• B

Un contexto de apilamiento es formado, en cualquier lugar del documento, por cualquier elemeto que:

• Sea elemento raíz (HTML).
• Tenga posición (absoluta o relativa) con un valor z-index distinto del “auto”,
• Position: fixed;
• Un elemento flex con un valor z-index distinto de “auto”, que sea el elemento padre display:flex/inline-flex.
• Sean elemento con un valor opacity menor de 1;
• Elementos con un valor transform distinto de “none”.
• Elementos con un valor mix-blend-mode distinto de “normal”.
• Elementos con un valor filter distinto de “none”.
• Elementos con un valor perspective distinto de “none”.
• Elementos con un valor isolation igual a “isolate”.
• Especifican cualquier atributo superior en will-change incluso si no especificas valores para estos atributos directamente.
• Elementos con un valor -webkit-overflow-scrolling igual a “touch”

Muchisimas gracias por la explicacion del z-index, siempre tuve problemas con esa propiedas, y con los otros temas de posicionamiento. Pude acertar correctamente en todos los quizes 😅😊

4/6 a seguir practicando 👏👏👏

https://material.io/design/environment/elevation.html#elevation-in-material-design

En la referencia del sistema de diseño creado por Google, Material Design, se especifica el concepto de elevación y como se simula la elevacion en la web con uso de las sombras. En la referencia hay alguna animaciones bastante interesantes que ayudan a ejemplificar estas ideas.

Le atiné a 5 de 6! 😁

5 de 6 en la dinámica.

excelente clase, les comparto un juego de flex. https://flexboxfroggy.com/#es

https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

Uffff 5 de 6 a seguir practicando 😄

Los hijos siempre van a respetar el z-index del padre, por lo cual (en el ejemplo), nunca van a tener un z-index mayor a este.