Use these shorthand utilities for quickly configuring the position of an element.
.position-fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The
leftproperties 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: absoluteis removed from the normal document flow. ... If it doesn't have any parent elements, then the initial document
htmlwill be its parent
.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-leftto 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.
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.