Position
Utilities for controlling how an element is positioned in the DOM.
| Class Name | CSS Equivalent |
|---|---|
| static | position: static; |
| relative | position: relative; |
| absolute | position: absolute; |
| fixed | position: fixed; |
| sticky | position: sticky; |
Static Position
The .static class sets the position property to static. This is the default positioning for an element in the normal flow of the document.
<div class="static">
<!-- Element with static position -->
</div>Relative Position
The .relative class sets the position property to relative. It allows you to position an element relative to its normal position in the document flow.
<div class="relative">
<!-- Element with relative position -->
</div>Absolute Position
The .absolute class sets the position property to absolute. It allows you to position an element relative to its nearest positioned ancestor. Use absolute to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist.
Any offsets are calculated relative to the nearest parent that has a position other than static, and the element will act as a position reference for other absolutely positioned children.
<div class="absolute">
<!-- Element with absolute position -->
</div>Fixed Position
The .fixed class sets the position property to fixed. It allows you to position an element relative to the viewport, so it remains in the same position even when the page is scrolled.
Any offsets are calculated relative to the viewport and the element will act as a position reference for absolutely positioned children.
<div class="fixed">
<!-- Element with fixed position -->
</div>Sticky Position
The .sticky class sets the position property to sticky. It allows an element to stick to the nearest scrolling ancestor or the viewport once it reaches a specified scroll position.
<div class="sticky">
<!-- Element with sticky position -->
</div>