Positions can also be changed for mobile viewports by adding the following classes, .position-on-mobile-absolute,
.position-on-mobile-relative, and .position-on-mobile-static
.position-fixed; is positioned relative to the viewport, which
means it always stays in the same place even if the page is scrolled. The top,
right, bottom, and left properties are used to
position the element
.position-relative, the element is positioned relative to itself. However,
an absolute positioned element is relative to its parent. An element with position:
absolute is removed from the normal document flow. ... If it doesn't have any
parent elements, then the initial document html will be its parent
.position-absolute
.position-absolute
.position-absolute; is positioned relative to the nearest
positioned ancestor (instead of positioned relative to the viewport, like fixed). However;
if an absolute positioned element has no positioned ancestors, it uses the document body,
and moves along with page scrolling. You can use .pos-top,
.pos-right, .pos-bottom, and .pos-left to position
relavant to its closest relative positioned ancenstor
Position an element at the top of the viewport, from edge to edge, but only after you
scroll past it. The .sticky-top utility uses CSS’s position:
sticky, which isn’t fully supported in all browsers.
Some example text..
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices
1..
...
...
...
4..
...
...
...
8..
...
...
...
12.
...
...
...
16.
...
...
...
20.
...
...
...
24.
.position-static will generally 'reset' these properties
.position-absolute