Transcript

In this Quick Tip, we're going to learn about the container element, floating group. A floating group is as it sounds, it acts just like any other group but it floats on top of every other element on your page and is not contained within the page.

You would reserve using floating groups for designs where you wanted information to stay on the screen and scroll with the user as they navigate the page. For example, you could use a floating group to have a fixed header that scrolls down the page just by changing it from a group, which is what it usually is, to a floating group.

A floating group is added to the page just like any other container. It acts just like a group element so we can add elements to it or set its Type of content and Data source. But because it floats to the top, you can't group a floating group.

There are three positions we can Vertically float relative to Top, Bottom, or Both. Nothing would make it not float at all so we're going to look at the first three.

Top is the default, which will anchor the floating group's distance between the top edge of the group and the top of the user's screen and keep it constant no matter the scrolling position of the page. Even if we edited this floating group to go further down, the distance is still constant as we scroll. If we change this to Bottom, then it follows the distance between the bottom of the floating group edge and the bottom of the page. If we change it to Both, assuming our page is in fixed width, the floating group will remain constant from top and bottom.

Because floating groups aren't on the page and they float above or below, they aren't going to respect other responsive elements on the page and will have their own responsive properties.

That's it for this Quick Tip! For more, be sure to check out bubble.io academy.