Module 21 : Position Utilities (Relative, Absolute, Sticky) in Bootscript.
1. Bootstrap position utilities
Bootstrap provides a succinct set of classes that map to CSS position
values:
.position-static → position: static; (default)
.position-relative → position: relative;
.position-absolute → position: absolute;
.position-fixed → position: fixed;
.position-sticky → position: sticky;
Directional helpers (offsets) you can use alongside these classes:
top-0, bottom-0, start-0, end-0 (0 offsets)
top-50, start-50, etc. (50% offsets)
translate-middle, translate-middle-x, translate-middle-y (useful with 50% offsets)
Responsive variants: position-sm-relative, position-md-absolute, etc. (apply at breakpoint and up).
2. each position type
2.1 static (default)
The element is positioned in the normal document flow.
top, left, etc. have no effect.
Use when you want elements to flow naturally.
2.2 relative
The element remains in the normal document flow but can be shifted using offsets (top, left, etc.).
Crucially, it creates the containing block for absolutely positioned children. That makes .position-relative commonly used on wrapper elements so .position-absolute children are positioned relative to the wrapper, not the page.
Example use cases: small nudges, anchors for absolute (badges, overlays), small animations.
Why it’s useful:
You keep the element’s original space, so layout doesn’t collapse.
You get a predictable coordinate system for absolute children.
2.3 absolute
The element is removed from the normal flow and positioned relative to its nearest positioned ancestor (an ancestor with position other than static). If none exists, it’s positioned relative to the initial containing block (often the <html> element / viewport).
When removed from flow, it does not occupy space and other elements behave as if it’s not there.
Use cases: dropdowns/menus, tooltips, overlays, badges inside cards, positioned icons.
Key pitfalls:
If no positioned ancestor exists, absolute elements may be positioned relative to <body> which can be unexpected.
Because it’s removed from flow, layout may overlap — intentional for overlays, but problematic if not considered.
2.4 sticky
Acts like position: relative until a threshold (e.g., top: 0) is crossed during scroll; then it behaves like position: fixed (sticking to the viewport).
The sticky element is positioned relative to its nearest scroll container (often the viewport) and only sticks while within its containing block.
Use cases: table headers that remain visible while scrolling within a container, side navs that stick as you scroll, small call-to-action bars.
Important details:
The ancestor’s overflow must not be hidden/auto in ways that prevent sticky behavior — position: sticky needs a container with visible scroll behavior.
The element’s containing block height matters: once the container is scrolled past, the sticky stops.
3. (annotated)
Example A — Badge anchored inside a card (relative + absolute)
<div class="card position-relative" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="position-absolute top-0 start-0 m-2 badge bg-danger">NEW</div>
<div class="card-body">
<h5 class="card-title">Product</h5>
<p class="card-text">Description</p>
</div>
</div>
Explanation: The .card is .position-relative so the badge (absolute) uses the card's top-left as the coordinate origin. m-2 gives the badge some margin from the very corner.
Example B — Centering a modal-like box (absolute + translate)
<div class="position-relative" style="height: 300px;">
<div class="position-absolute top-50 start-50 translate-middle p-4 border rounded">
I am centered inside the container.
</div>
</div>
Explanation: top-50 start-50 puts the top-left corner of the inner box at the container's center. translate-middle shifts the box back by 50% of its own width/height so its center aligns with the container center.
Example C — Simple sticky header inside a scrolling container
<div style="height: 300px; overflow:auto; border: 1px solid #ddd;">
<div class="position-sticky top-0 bg-white p-2 border-bottom">Sticky header</div>
<div style="height: 1000px; padding: 1rem;">Long scrolling content...</div>
</div>
Explanation: The container has overflow:auto and a fixed height, creating a scroll context. .position-sticky top-0 makes the header stick to the top of the container while the user scrolls through the long content.
4. Combining with z-index and stacking context
An absolutely positioned element may be placed behind or in front of other elements; use z-index utilities (e.g., z-1, z-3, z-50 in Bootstrap 5+) to control stacking.
Be aware that position combined with transform or opacity can create a new stacking context, affecting z-index ordering.
Rule of thumb: If an element refuses to appear above another, check stacking contexts on ancestors (transforms, filters, position + z-index).
5. Responsive positioning
Bootstrap allows breakpoint-prefixed position utilities like .position-sm-absolute.
Use them to change an element’s positioning only on certain screen sizes. Example:
<div class="position-relative">
<div class="position-absolute position-sm-relative top-0 start-0">Responsive child</div>
</div>
This example makes the child absolute on xs, but relative on sm and wider (use cases vary — choose deliberate behavior).
6. Tips.
1 — Create a product card with anchored badge and info overlay
Goal: Make a card where a badge sits in the top-left, and an info overlay appears in the bottom-right on hover.
Steps:
Create a .card with .position-relative and an image.
Add a .position-absolute top-0 start-0 badge.
Add a .position-absolute bottom-0 end-0 overlay div with opacity:0; transition: opacity .2s;.
On .card:hover set overlay opacity: 1.
Expected result: Hovering the card fades in the overlay in the bottom-right, without shifting other content.
tips:
If the badge is positioned relative to the page instead of the card, ensure .card has .position-relative.
If the overlay occupies space, confirm it has position-absolute and no margin collapsing.
2 — Sticky table header inside a scrollable container
Goal: Build a table where the <thead> stays visible while the table body scrolls.
Steps:
Place a <table> inside a div with fixed height and overflow:auto.
Add class="position-sticky top-0 bg-light" to the <thead> (or each <th> depending on browser behavior).
Test: scroll the container — header should stay.
compatibility:
Some browsers require applying position-sticky to the <th> elements rather than the <thead>; if you see inconsistent behavior, move the class to <th>.
Ensure ancestor containers don’t have overflow:hidden that prevents sticky.
3 — Floating action button in bottom-right (fixed vs absolute)
Goal: Compare .position-fixed vs .position-absolute for a bottom-right floating button.
Steps:
Add a button with .btn class and .position-fixed bottom-0 end-0 m-3.
Scroll the page — fixed button remains stuck to the viewport.
Change to .position-absolute and place it inside a tall container — it will scroll with the container instead.
point: Use fixed for viewport-anchored UI (global actions). Use absolute for container-specific overlays.
7. exercises
Exercise 1 — Center a small notification in the top-right corner of a container, 16px from top and right.
Answer (HTML):
<div class="position-relative" style="height:200px;">
<div class="position-absolute" style="top:16px; right:16px;">
<div class="badge bg-info">Notice</div>
</div>
</div>
(You can also use utility classes like top-0 end-0 with m-2 if you prefer Bootstrap spacing helpers.)
Exercise 2 — Make a navbar item stick to top after scrolling 10px.
Use .position-sticky top-0 on the element and ensure the scroll container allows it.
Use a box-shadow or border to indicate being stuck.
Typical solution:
<header class="position-sticky top-0 bg-white shadow-sm"> ... navbar ... </header>
Ensure the header’s parent is the viewport or a scrollable container.
Exercise 3 — Place a tooltip inside a .position-relative container so it never overflows the container bounds.
(concept): Create .position-relative wrapper; tooltip is .position-absolute with max-width and offsets clamped by container size. Optionally use overflow-auto on the container so tooltip scrolls if content is too big.
No comments:
Post a Comment