Posicionamiento CSS explicado por la construcción de un helado

Si ya has hecho un helado antes, entonces puedes entender el posicionamiento CSS.

Tus divs se acercan a la pantalla como velas romanas.

Se sumergen profundamente en su contenedor, luego regresan a la superficie como una ballena.

Empujan los otros elementos fuera del camino, luego dejan el contenedor completamente como un hombre de negocios impaciente.

Y de alguna manera, esto sucede de una manera nueva y emocionante cada vez que cambia esa desagradable línea de CSS: la propiedad de posición.

Cada persona que ha aprendido CSS ha estado allí. El posicionamiento de CSS parece no tener sentido hasta que horas de prueba y error finalmente le dan una comprensión vaga.

Esta publicación pondrá fin a la confusión, de una vez por todas. La propiedad de posición no parece tener una relación obvia con ningún concepto del mundo real ... hasta que consideres el humilde helado.

Cubriremos las siguientes propiedades de posición:

  • Absoluto
  • Estático (predeterminado)
  • Fijo
  • Relativo

Y, en aras de la claridad, un helado consistirá en 4 componentes principales:

  • El cristal
  • Bolas de helado
  • Crema batida
  • Guindas

El helado de helado como HTML

Si tuviera que explicar la estructura de un helado con HTML, probablemente se vería así.

O, en forma de imagen:

Antes de sumergirnos en CSS, podemos hacer un par de observaciones:

  1. El número de bolas de helado está limitado por la altura del vaso. No podemos seguir apilando bolas de helado para siempre. Eventualmente, toda la hermosa configuración se derrumbaría.
  2. Puedes poner las cerezas donde quieras, por favor. Las cerezas no obedecen el flujo y el apilamiento de las bolas, son más pequeñas y pueden caber en rincones y grietas donde no puede caber una bola de helado. Y, más cerezas no alterarán el orden de las bolas.
  3. La crema batida se encuentra en la parte superior, sin importar cuántas cucharadas haya. ¿Alguna vez has visto un helado con la crema batida en el medio y nada encima? Yo tampoco.

Posición relativa / estática: el vaso y las cucharas

Como se muestra en la primera imagen, nuestra torre inclinada de helado solo puede contener 5 bolas antes de caerse. Digamos que estas 5 primicias tienen una altura total de 500 píxeles, y cada primicia se ubica directamente una encima de la otra. Nuestro div FullSundae, en ese caso, tendría una altura de 500 px para indicar que solo puede manejar esos 5 primicias, y no más. Este es un ejemplo de la posición predeterminada, estática. Usamos esto para mostrar que la altura no está relacionada con ningún contenedor div.

Lo más sencillo a continuación sería darle a cada iceCreamScoop una altura de 100 px, que coincidiría con la altura del div FullSundae. Eso no sería divertido, porque el div de vidrio sería de 300 píxeles por defecto. Miremos de otra manera.

Dado que el div de vidrio contiene tres de las cinco cucharadas, y todas las cucharas tienen la misma altura, podemos ver que el div de vidrio es el 60% de la altura del div fullSundae. ¡Esta es una oportunidad para un puesto relativo! Puede configurar el cristal div en posición relativa y darle una altura del 60%. La división de vidrio mirará la altura de toda la división de FullSundae y ocupará el 60% de ese espacio. El porcentaje es relativo a la altura del contenedor div, que se declaró explícitamente como 500px.

Puedes ir aún más lejos. Si configura cada iceCreamScoop dentro del div de vidrio en una posición relativa, cada cucharada calculará su altura en función de la altura del div de vidrio. El vidrio puede caber en tres cucharadas, por lo que cada cuchara debe tener una altura del 33,3%. Aquí está todo eso en el código.

Posición fija: la crema batida

La posición fija debería ser la más fácil. Un elemento de posición fija quedará atascado en su lugar sin importar qué tan lejos se extienda el cuerpo. En términos de helado, esta es la crema batida en la parte superior. No importa cuántas bolas de helado intentes apilar, la crema batida seguirá estando en la parte superior, con la misma relación con las bolas. Se coloca en relación con el cuerpo, no con el div que lo contiene.

La crema batida es independiente de la serie de bolas de helado. La cantidad de crema batida no afecta la cantidad máxima de cucharadas que puede tener en el helado completo. Se mantiene en un lugar constante en la página.

Comúnmente se ve una posición fija en los encabezados y pies de página. Estos son los elementos que se mantienen en su posición, incluso cuando desplaza la página o div.

Posición absoluta: las cerezas

Hay una razón por la que guardé Position Absolute para el final: puede llevar a un código que no se puede mantener si lo usa con demasiada frecuencia. Usted ha sido advertido. Pero, funciona perfectamente para las cerezas en este ejemplo.

Puedes poner cerezas en casi cualquier lugar en este helado. Puedes poner un montón encima y no se caerá. Puedes meterlos en el vaso y aún podrás colocar la misma cantidad de helado. No obedecen las mismas reglas que la posición estática y los elementos relativos de posición. Además, puede eliminarlos sin molestar a ningún otro elemento.

Estos son los componentes clave de la posición absoluta. Los elementos de posición absoluta no perturban la ubicación de otros elementos, pero debe indicar su posición explícitamente. Si no lo hace, se configuran de manera predeterminada en la esquina superior izquierda del cuerpo. O, si uno de sus padres tiene una posición relativa, van a la esquina superior izquierda de ese div.

Mira este helado lleno de cerezas. Hay cerezas agregadas en muchos lugares, y no perturban el flujo de los otros elementos. Pero tenga en cuenta que no puede apilar las cerezas como apila bolas de helado. Las cerezas no se apilan. Debe colocar cada uno explícitamente.

Una última nota: la posición absoluta se calcula en función del padre más cercano que NO es una posición estática. Si cada padre tiene una posición estática, se calcula en función de todo el cuerpo. Por lo tanto, en el caso anterior, las cerezas dentro del vidrio se colocan en función de la altura del div de vidrio, no en función de la altura del div fullSundae. El cristal div tiene posición relativa.

Ahora ve a practicarlo, y cuando te sientas un poco más cómodo ... ¡te mereces un helado!

EDITAR: ¡ahora puedes construir un helado con posicionamiento CSS en este tutorial interactivo!

¿Te gustó esta publicación? ¡Dale un "corazón" para que también pueda ayudar a otros!

Esta publicación apareció originalmente en el blog CodeAnalogies.