Filosofía de Positioning
El absolute positioning puede ser una de las partes más complicadas del desarrollo responsive. Pero un par de estrategias pueden simplificar mucho el proceso. La clave es racionalizar cómo y cuándo usar los diferentes métodos de posicionamiento de CSS.
1. Definiendo el element sizing para scaling
Es importante definir el tamaño del elemento en unidades VW para que se escale en relación con el background. Esto se puede hacer con una clase personalizada como Background Element 001 .
Una unidad VW es 1 por ciento del ancho de la pantalla. Entonces, si un elemento tiene 400 px de ancho en el design canvas que tiene 1440 px de ancho, el ancho de VW será 27.778 ( 400/1440*100 ).
2. Posicionando el elemento en un anchor point
Un punto de anclaje es un punto predecible en el parent div que no se verá afectado por el ajuste o el cambio de tamaño del texto. Si deseas colocar algo en la bottom right corner, por ejemplo, no lo colocarías a una cierta cantidad de unidades de la parte superior del parent div. En su lugar, vas a querer colocarlo en relación con el bottom line corner, de modo que si la altura del parent container cambia debido a algo como el ajuste de palabras, arrastrará hacia abajo el elemento de posición absoluta. Una de las clases de posicionamiento de Knockout ( Absolute - Top Left , Absolute - Top , Absolute - Top Right , Absolute Left , Absoluta - Centro , Absoluta - Derecha , Absolute - Bottom Left , Absolute - Bottom Center , Absolute - Bottom Right ) se pueden agregar al elemento para lograr esto.
3. Offset the element from the anchor point with margin
Vuelve a la clase personalizada del element para desplazarlo del anchor point con margen en unidades VW.
4. Reservando la propiedad de transform para animation
La razón por la que no usamos Transform para posicionar el elemento es porque Webflow usa Transform para las Interactions. Así que un elemento que se posiciona absolutamente y se desplaza con márgenes todavía puede ser animado para, por ejemplo, moverse en el desplazamiento.