 |
VOOZH | about |
|
VOOZH | about |
Bootstrap 5 Position Values offers position utilities for defining the position of elements relative to the viewport's edge. It supports Fixed, Static, Relative, Absolute, and Sticky positioning, providing helper classes for easy implementation of these properties.
Bootstrap 5 Position value Classes:
| Position Class | Description |
|---|---|
| position-static | Sets element position to static, maintaining fixed position regardless of other elements, unaffected by top, right, bottom, and left properties. |
| position-relative | Positions element relative to their normal position, influenced by surrounding elements, top, right, bottom, and left properties affect the position. |
| position-absolute | Positions element relative to nearest positioned ancestor, top, right, bottom, and left properties adjust position relative to the ancestor. |
| position-fixed | Sets element position relative to viewport, remains fixed during page scroll, top, right, bottom, and left properties adjust position within viewport. |
| position-sticky | Element initially positioned relative or fixed, then sticks at predetermined offset, adjusts with scroll, determined by top, right, bottom, and left properties. |
Syntax:
<div class="position-values">
...
</div>
Example 1: The example below demonstrates the usage and implementation of the position-static, position-relative, and position-absolute classes.
Output:
Example 2: The example below demonstrates the usage and implementation of the position-sticky and position-fixed classes. In the output given you can clearly see how the fixed position means the element will have a fixed positioning with respect to the viewport. But the sticky positioning means the element will have a fixed positioning with respect to the parent element which in this case is the HTML div element with the "container" class.
Output:
