Position

Position

Canvas uses Bootstrap 5 position utilities and adds responsive position variants and sticky helpers.

Position type

Class	position
.position-static	static
.position-relative	relative
.position-absolute	absolute
.position-fixed	fixed
.position-sticky	sticky

Canvas adds responsive position hooks: .position-sm, .position-md, .position-lg, .position-xl, .position-xxl.

Placement (edges)

Position an absolutely or fixed positioned element against an edge:

Class	Effect
.top-0, .top-50, .top-100	top offset 0 / 50% / 100%
.bottom-0, .bottom-50, .bottom-100	bottom offset
.start-0, .start-50, .start-100	left offset
.end-0, .end-50, .end-100	right offset

Pair with .translate-middle to true center an element on a point.

Sticky helpers (Canvas)

Class	Purpose
.sticky-top	Stick to top
.sticky-bottom	Stick to bottom
.sticky-header	Sticky header behavior
.sticky-footer	Sticky footer behavior
.sticky-page	Sticky page element
.sticky-sm, .sticky-md, .sticky-lg, .sticky-xl, .sticky-xxl	Responsive sticky

Usage

Badge pinned to the top right of a card:

<div class="position-relative">
  <span class="position-absolute top-0 end-0 translate-middle badge bg-danger">New</span>
  <div class="card">...</div>
</div>

Sticky sidebar column:

<aside class="sticky-top" style="top: 90px;">
  Sidebar that stays in view while scrolling.
</aside>