The static value in the snippet above tells browsers to position item3 statically according to the document’s normal layout flow.
What Is position: relative in CSS?
relative positions the selected element relative to its regular position in the document’s normal layout flow.
In other words, suppose you have placed an element according to the page’s normal flow. The position: relative declaration along with the CSS top, right, bottom, and left properties allow you to offset the element relative to its initial position.
We used the position property to offset item3 absolutely 25px away from the HTML document’s top edge and 40px from its left side.
Suppose an absolutely positioned element’s parent has a static position property. In that case, browsers will offset the absolute item from the HTML document’s edges.
For instance, the snippet above offsets item3 from the HTML document’s edges because its container’s (the <section> element) position property is static.
If you prefer to offset item3 from its container’s edges, specify a non-static position property for the <section> element.
It fixes the removed element to the specified region of the viewport.
In other words, browsers will fix a fixed positioned element to the specified area of the viewport. Therefore, the item will remain in the same place even when users scroll the page.
In the snippet above, each <section>’s sticky item stops sticking to the viewport once users scroll to the container’s bottom edge.
2. Sticky won’t work if its ancestor has a non-visible overflow property and no set height
Suppose any of the sticky element’s ancestor (parent) has a non-visible overflow value. In that case, the sticky effect will not work—unless you set the overflowing container’s height.
In other words, a position: sticky property has no effect if you use it on an element whose ancestor has any of the following properties and no scrollable height:
Only the fourth section’s sticky item worked because it is the only one whose ancestor has an overflow: visible property.
The remaining sticky items did not work because of the following reasons:
The <section> elements containing them are their nearest scrolling element (ancestor).
The <section> elements containing them are their nearest containing block ancestor.
A sticky element sticks to its nearest “scrolling” and “containing block” ancestor. (Note: You must activate the scrolling mechanism to implement the sticky effect).
Therefore, suppose the first <section> has a height that activates its scrolling mechanism. In such a case, its sticky item will stick to it.
A scrolling element is an element with a non-visible overflow value. In other words, an element has a scrolling mechanism if its overflow property is auto, hidden, overlay, or scroll.
You can activate a container’s scrolling mechanism by making its height less than the total height of its children.
An element’s position property’s value determines its containing block.
3. How to find a sticky element’s ancestors that have a non-visible overflow property
Below is the snippet for finding a sticky element’s ancestors whose overflow property’s value is auto, hidden, overlay, or scroll.