Position Utilities

Twigwind provides comprehensive position utilities for controlling element positioning, including absolute, relative, fixed, sticky positioning, and z-index management.

💡 Tip: Position utilities work seamlessly with hover states and transitions for smooth animations.

Position Types

Control the positioning method of an element using these utilities:

absolute - Position absolutely relative to the nearest positioned ancestor
relative - Position relative to its normal position
fixed - Position relative to the viewport
sticky - Position based on scroll position
static - Default positioning (removes any positioning)

Example

<div class="relative bg-blue p-20">
  <div class="absolute top-10 right-10 bg-red p-5">Absolutely positioned</div>
</div>

<div class="fixed top-0 right-0 bg-green p-10">Fixed to viewport</div>

<div class="sticky top-0 bg-purple p-10">Sticky header</div>

Position Values

Control the exact position of absolutely, relatively, or fixed positioned elements:

Individual Sides

top-{value} - Set top position (e.g., top-10, top-0)
bottom-{value} - Set bottom position (e.g., bottom-5, bottom-auto)
left-{value} - Set left position (e.g., left-20, left-0)
right-{value} - Set right position (e.g., right-10, right-auto)

Example

<div class="absolute top-10 left-20">10px from top, 20px from left</div>
<div class="absolute bottom-0 right-0">Bottom right corner</div>
<div class="absolute top-auto bottom-10">Auto top, 10px from bottom</div>

Inset Utilities

Set all four sides at once using inset utilities:

inset-0 - Set all sides to 0 (fills container)
inset-{value} - Set all sides to the same value (e.g., inset-4, inset-20)

Example

<div class="relative bg-gray p-20">
  <div class="absolute inset-0 bg-blue">Fills entire container</div>
</div>

<div class="relative bg-gray p-20">
  <div class="absolute inset-10 bg-red">10px from all sides</div>
</div>

Z-Index

Control the stack order of positioned elements:

z-0 - Set z-index to 0
z-10 - Set z-index to 10
z-20 - Set z-index to 20
z-50 - Set z-index to 50
z-auto - Set z-index to auto

Example

<div class="absolute top-20 left-20 bg-red p-10 z-10">Behind (z-10)</div>
<div class="absolute top-30 left-30 bg-blue p-10 z-20">On top (z-20)</div>
<div class="absolute top-40 left-40 bg-green p-10 z-0">Behind both (z-0)</div>

Hover Effects with Position

Combine position utilities with hover states for interactive effects:

Example

<div class="absolute top-50 left-50 bg-purple p-10 
           hover:top-20 hover:left-20 
           transition:all-ease-300">
  Hover to move position (with smooth transition)
</div>

✅ Position utilities work perfectly with Twigwind's existing transition system for smooth animations!

Responsive Position

Use responsive prefixes to change positioning at different screen sizes:

Example

<div class="relative sm:absolute md:fixed lg:sticky">
  Responsive positioning
</div>

<div class="top-10 sm:top-20 md:top-30 lg:top-40">
  Responsive position values
</div>

⚠️ Note: Remember that positioned elements are removed from the normal document flow (except relative and sticky).