Position

go.raybo.org/49sY

Position is another key property in CSS and Bootstrap has a full complement of classes.

Position Properties

  • position-{VAL}

static relative absolute fixed sticky

The position property in CSS lets you control how an element flows within the context of the existing page.

static - The element will flow with the natural flow of the page. This is the default.

relative - The element would go where it would normally go, but we can offset it's position from that spot.

absolute - The element is removed from where it would normally go and is positioned in relation to the nearest relatively position parent...or the window if nothing reaches the window.

fixed - This element moves relative to the viewport (browser window)

sticky - This element will stick to a certain position as it scrolls by.

Arrangement Properties

  • {PRO}{POS}

  • PRO

top start bottom end

  • POS

0 50 100

  • TRANSLATE

translate-middle

Try it

Where an element sits is relative to a position attribute and we have four sides with three position options we can specify.

There's also an extra property you can use to center elements in each of the corners.

Practice

Start End
  1. Create a button
  2. Add an icon inside
  3. Use positioning/translate
  4. Align icon top right

Create a button that has an icon in the corner. Use one of the Bootstrap Icons to add an icon to the corner of the button. use positioning classes to align it to the top right.

<div class="position-relative d-inline-block bg-primary rounded-2 text-white px-2 py-1">
  Bubbles
  <i class="position-absolute top-0 start-100 translate-middle bi bi-heart-fill text-danger"></i>
</div>