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.
<!DOCTYPE html>
<html lang="en">
<head>
<link
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body class="m-2">
<h4 class="mb-4">
Bootstrap 5 Position values
</h4>
<div class="container mt-4 bg-light">
Position: sticky is means that the
top, right, bottom, and left
properties will be the same no matter
<p
class="position-static
bg-success top-50
start-50 text-light"
>
This paragraph has position:
static;
</p>
This part is out of the paragraph.
</div>
<div class="container mt-4 bg-light">
Position: relative sets its position
to be relative with respect to the
elements on top of it
<p
class="position-relative
bg-success top-50
start-50 text-light w-50"
>
This paragraph has position:
relative;
</p>
This means that the top, right,
bottom, and left properties will
affect the position of the Paragraph.
</div>
<div class="container mt-4 bg-light">
Position: absolute sets its position
relative to the closest parent and it
set its position absolute with that
<p
class="position-absolute
bg-success bottom-0
end-50 text-light"
>
This paragraph has position:
absolute;
</p>
This means that the top, right,
bottom, and left properties will get
adjusted with respect to the nearest
ancestor and then the position is set.
</div>
</body>
</html>
Output:
Bootstrap 5 Position Values Example 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.
<!DOCTYPE html>
<html lang="en">
<head>
<link
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body class="m-2">
<h4 class="mb-4">
Bootstrap 5 Position values
</h4>
<div
class="container mt-4
bg-light position-relative"
style="height: 120rem"
>
<div
class="position-sticky
bg-success m-4
text-light start-50 top-0"
>
This div element has position:
sticky
</div>
<div
class="border border-success border-2 m-4"
>
This div element has default
position
</div>
<div
class="position-fixed
bg-warning start-50 top-0"
>
This div element has position:
fixed
</div>
</div>
</body>
</html>
Output:
Bootstrap 5 Position Values Example Output