¿Cómo se usa position en CSS? Tutorial en Español. 

el postion que use fue el sticky y top: 0 para el header y bottom:0 para el footer, te dejo el link del codepen donde lo estoy probando, por si lo podes ver, codepen.io/silviozabala/pen/KKzebjL Te agradezco

Gracias Silvio! estoy en el trabajo, pero cuando salga me fijo y resolvemos el asunto

@@Emprinnos Muchas gracias, no hay apuro, cuándo puedas!!!

Saludos Silvio, ya vi el codepen. Hay varias cosas alla. El contenedor con la clase principal es un contenedor "grid" y definiste 2 columnas y 2 filas: grid-template-areas: "caja1 caja1" "caja2 caja3"; pero el parrafo (el que tiene bastante texto) está fuera de las cajas, podrias meterlo en la primera caja por ejemplo o podrias crear otro div, definir una fila mas y meter el párrafo alla. Otra cosa es el selector de clase .grid {} para grid-template-rows: tienes 1fr 18f 1fr;, cambialo a 1 fr auto 1 fr para que la segunda fila se ajuste de forma automatica y todo debe funcionar correctamente, yo lo probé en el Firefox y ambos header y footer se quedaban pegados. Otra cosa acerca de position sticky, hay casos cuando esta propiedad no funciona bien, de hecho, si no me equivoco, oficialmente no se recomienda usarla en codigo de produccion. Si no funciona, puede ser por varios factores, el más común es que el contenedor donde se ubica el elemento con position sticky tiene la propiedad overflow con hidden, scroll, auto, o overlay. Chequea esto primero. Segundo, top, bottom, left, right tiene que estar especificado. A veces no funciona bien con flexbox y a veces la propiedad height puede causar problemas tambien. La idea de position sticky es que el elemento se comporte como posicionado RELATIVO hasta que cruce el valor especificado(top, bottom, right o left) y despues se comporte como fijo hasta que alcance el límite del contenedor donde se ubica.

@@Emprinnos Hola Sergio, buenas noches, lo del párrafo dentro del div.principal fue adrede que lo deje fuera de las otras cajas para ver como funcionaba, ahí lo acabo de poner en la caja1 y a la propiedad grid-template-rows: del grid lo deje como me indicaste 1fr auto 1fr y se comporta igual como te comente anteriormente. Se esconde el header cuando la linea inferior de la caja html, si podes ver que en css le puse un border, justamente para ver que podía generar este resultado. te dejo mi email si podes escribirme y te paso la imagen silvio.zabala@gmail.com Desde ya te agradezco tu predisposición. Saludos. Pd: en el mismo link se puede ver corregido como me comentaste.

Gracias Pablo, saludos!

gracias Elliot!

Que bueno Facu, saludos!

Que bueno Adyany, saludos!

Excelente Jaime, saludos!

Gracias Sol!

Gracias Jean

Gracias Alexander, saludos!

😀

Saludos Silvio, muy buena pregunta y me da mucho gusto que estés practicando. En el video se usa position: absolute para el CONTENEDOR#2, esta caja esta adentro de un contenedor padre. Ahora, cuando se usa position absolute pasan varias cosas: 1)el elemento se saca del flujo normal del documento 2) su posicion se calcula (o especifica con top, left, right, bottom) relativo a su ancestro más CERCANO que esté POSICIONADO, en otras palabras, el ancestro cuyo valor de position NO ES STATIC. Esto quiere decir que si quieres fijar la posición del contenedor # 2, relativo al contenedor padre, el valor de position para el contenedor padre no puede ser static (el valor predeterminado), tiene que ser relative, fixed o absolute. En el ejemplo del video, el contenedor padre no tiene nada especificado para la propiedad position, o sea tiene el valor de default, por lo tanto NO ES el ancestro POSICIONADO más cercano. Entonces, al usar top, left, right y bottom, el contenedor#2 se posiciona relativo a los bordes del elemento .

@@Emprinnos Excelente explicación, muchas gracias, ahora me surje la duda de que tipo de posicionamiento tiene html, entiendo que no es STATIC, hay forma de verlo desde las herramientas del browser?, Muchas gracias

De acuerdo con la documentacion de MDN la posicion se especifica relativo al ancestro posicionado mas cercano y si NO HAY NINGUNO, relativo al bloque contenedor (en Ingles el termino es "containing block"), en este caso seria el bloque donde reside el elemento raiz () que se llama tambien el bloque contenedor inicial ("initial containing block") aun si SU VALOR DE LA PROPIEDAD POSITION ES STATIC. En otras palabras, el contenedor#2 se posiciona relativo al bloque donde reside el elemento html NO PORQUE el elemento html NO ES STATIC, sino porque es SU BLOQUE CONTENEDOR. El valor predeterminado de position es siempre static al menos que se indique de forma explicita. Ahora, si quieres ver las propiedades en developer tools, digamos en Firefox, abre el archivo html en el navegador. haz un click derecho en la pagina, selecciona "inspect element" tambien puedes usar el atajo de teclado ctrl + shift + I haz click en el elemento html que te interesa y en la parte derecha (abajo) vas a ver el modelo "box" con las propiedades especificadas.

@@Emprinnos Clarísimo, gracias por tus respuestas, Saludos Silvio

@@silviozabala2814 En los archivos del CSS grid hice el header y el footer sticky y más o menos pude reproducir el resultado que mencionaste. Al principio el header se queda fijo pero despues se mueve con el contenido, esto pasa porque height esta a 100vh, en otras palabras cuando el contendio del contenedor grid pase el alto del viewport, el header se va a mover con el resto porque sticky es fijo hasta que se llegue al borde del contenedor, de alli ya no es fijo. Para evitar esto puedes usar min-height: 100vh; Ahora "min-height: 100vh" soluciona este problema, pero aparece otro con las fracciones. Usa "auto" para las filas donde vas a meter mas contenido, de esta forma la fila se expande de manera automatica. Si lo dejas con 1fr 18 fr 1 fr como en el ejemplo, header y footer se van agrandando y si metes mas contenido lo unico que vas a ver en la pantalla es el footer. Esto se debe a que las fracciones se calculan en base al espacio disponible y como el contenido se esta agrandando la proporcion de 18 fr para la seccion principal y la proporcion de 1fr para header/footer aumenta tambien. Ahora, tu no ves en la pantalla el resto del contenido porque footer esta pegado alla y ahora ocupa toda la pantalla. Espero que te ayude en el futuro.

Fixed es fijo relativo al viewport, sticky es fijo hast cierto valor, despues se mueve con el scroll