Positioning Philosophies
Absolute positioning can be one of the trickiest parts of responsive development. But a couple of strategies can simplify the process a great deal. The key is rationalizing how & when to use CSS's different positioning methods.
1. Define the element size for scaling
It's important to define the size of the element in VW units so that it scales relative to the background. This can be done with a custom class like <class>Background Element 001<class>.
A VW unit is 1 percentage of the screen width. So if an element is 400px wide on a design canvas that is 1440px wide, the VW width will be 27.778 (400/1440*100).
2. Position the element to an anchor point
An anchor point is a predictable point on the parent div that won't be affected by text wrapping or resizing. If you want something positioned in the bottom right corner, for instance, you wouldn't position it a certain number of units from the top of the parent div. Instead, you'd want to position it relative to the bottom right corner, so that if the height of the parent container changes due to something like word wrapping, it will pull the absolute positioned element down with it. One of Knockout's positioning classes (<class>Absolute - Top Left<class>, <class>Absolute - Top<class>, <class>Absolute - Top Right<class>, <class>Absolute Left<class>, <class>Absolute - Center<class>, <class>Absolute - Right<class>, <class>Absolute - Bottom Left<class>, <class>Absolute - Bottom Center<class>, <class>Absolute - Bottom Right<class>) can be appended to the element to achieve this.
3. Offset the element from the anchor point with margin
Return to the element's custom class to offset it from the anchor point with margin in VW units.
4. Reserve the transform property for animation
The reason we don't use Transform to position the element is because Webflow uses Transform for Interactions. So an element that is positioned absolutely and offset with margins can still be animated to, for instance, move on on scroll.