How do you handle positioning (absolute, relative, fixed) in Tailwind?

Beginner

Answer

Tailwind provides position utilities with corresponding placement utilities:

Position types:

  • relative - position: relative
  • absolute - position: absolute
  • fixed - position: fixed
  • sticky - position: sticky

Placement utilities:

  • top-0, right-0, bottom-0, left-0
  • inset-0 - top, right, bottom, left: 0
  • inset-x-4 - left and right: 1rem
  • inset-y-2 - top and bottom: 0.5rem

Example:

<div class="relative">
  <div class="absolute top-2 right-2">Positioned element</div>
</div>