How can I ensure that the div in my Webflow website is positioned relative to the bottom of the page instead of the bottom of the screen?

If you want a div in Webflow to be positioned relative to the bottom of the page instead of the bottom of the screen, you need to use absolute positioning inside a parent that has a defined height. Here's how:

1. Set the Parent Element to Relative Position

• Select the section, div block, or container that holds your target div.
• In the Style Panel, set Position to Relative to ensure that child elements position themselves within it.

2. Set the Target Div to Absolute Position

• Select the div that you want to anchor to the bottom.
• In the Style Panel, set Position to Absolute.
• Set Bottom to 0px to make it stick to the bottom inside the parent element.

3. Ensure the Parent Has a Defined Height

• The parent element (e.g., a section) should have:
• Either a minimum height (min-height) or a fixed height (vh or px).
• Alternatively, allow content to dictate the height naturally.

4. Avoid Fixed Positioning

• Don't use Position: Fixed, as this will lock the div to the viewport instead of the page content.

Summary

To position a div at the bottom of the page instead of the screen, place it inside a relative parent, set the div to absolute positioning, and ensure the parent has enough height to extend through the whole page.