Basic CSS position in Webflow
The set up
Goat, chicken and sheep are in a green field. Sometimes they try to escape from the field so the farmer puts a fence around them.
Webflow > Style (S) > Layout > Display
The field has display: block; It is green with a 0.2em dotted border and has padding all round of 1em.
Note that the field div is taking its size from the elements inside it. It has no size properties of its own.
By default, a block element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
I want my animals next to each other so the goat, chicken and sheep are display: inline;
The images are 150px wide.
The default position for the field element is position: static;, which doesn't have any effect on the element. All the animals are sitting together in the field.
Webflow > Style (S) > Position > Static
border: 0.2em dotted #000;
An element with position: relative;. The top; and bottom; properties specify the vertical offset from its normal position. The left; and right; properties specify the horizontal offset from its normal position.
Here we have a naughty goat who is walking out of the field, relative to his normal position.
Webflow > Style (S) > Position: Relative ; bottom : -4em; left : -4em
With position: absolute;. the top: and bottom: properties specify the vertical offset from its containing block. The left: and right: properties specify the horizontal offset from its containing block.
Containing block means the block an element in inside - a parent element.
Here we have a naughty chicken that flew up to the top-right corner of this container.
Note: The containing block must NOT be static;
The position: absolute; looks for the containing block (parent) with a position which is fixed; absolute; relative; or sticky;
For absolute positioning, the containing block is the closest positioned parent.
To illustrate this, we have given the .container-green-10 an extra class .absolute-chicken with position: relative;
On the Webflow > Style (S) > Selector > container green 10 > absolute chicken with Position: Relative
On the Chicken absolute image: Webflow > Style (S) > Position: Absolute ; top : 0; right: -10%;
Note: The Position right works like padding - it starts from the right at 0 and moves things left.
With position: fixed; the top: and bottom: properties specify the vertical offset from its containing block. The left: and right: properties specify the horizontal offset from its containing block.
The containing block for fixed: positioned elements is the viewport, except when an element's parent has one of the following properties applied to it: transform: filter: or perspective: (we won't be looking at those today).
The naughty sheep has gone to the top-right corner of the viewport.
I've added an interaction so that this sheep is only visible while this section is in view.
On the sheep: Webflow > Style (S) > Position: Fixed ; top : 5%; right: 5%; bottom: 0;
Staring at goats
Here we are going to stare at two goats. They will stay in view while the field rolls out of sight. This is where position: sticky; is used.
The fence is positioned at the top of the field. But when the page scrolls it will stay in view even when the rest of the page moves. top: 50%; relates to the viewport, not the field. The goats will stare at you from the middle of the screen. But when the whole field moves out of view, so do the goats.
I've put a sheep in the field. At the start she looks like she's in the fence. She's not really, and she'll walk away when you scroll the page. And then you'll see the chicken come into view. Just to make things more fun, the field now has height: 150%vh; - 150% of the height of the viewport. You won't be able to see the top and the bottom on the field at the same time on whatever size screen you have!
Try scrolling inside the next field