Position Use these shorthand utilities for quickly configuring the position of an element.
Mobile friendly classes
Positions can also be changed for mobile viewports by adding the following classes,
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
An element with
.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
In
.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-relative
.position-absolute
.position-relative
.position-relative
.position-absolute
Position Absolute
An element with
.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-absolute .pos-top
.position-absolute .pos-bottom
.position-absolute .pos-right
Position Sticky
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.
IE11 and IE10 will render position: sticky as position: relative. As such, we wrap the styles in a @supports query, limiting the stickiness to only browsers that can render it properly.
Sticky Element: Scroll Down to See the Effect Scroll down this page to see how sticky positioning works
Some example text..
Scroll back up again to "remove" the sticky position.
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
Every element has a static position by default, so the element will stick to the normal page flow. So if there is a left/right/top/bottom/z-index set then there will be no effect on that element. Adding
.position-static will generally 'reset' these properties
.position-relative
.position-static
.position-absolute