Position

Set position type, inset edges, and centering with utility classes.

Position Values

<div class="velin-position-static">Static (default)</div>
<div class="velin-position-relative">Relative</div>
<div class="velin-position-absolute">Absolute</div>
<div class="velin-position-fixed">Fixed</div>
<div class="velin-position-sticky">Sticky</div>

Inset Utilities

Position edges using .velin-top-*, .velin-start-*, .velin-bottom-*, .velin-end-* with values 0, 50, 100 (percent):

<div class="velin-position-absolute velin-top-0 velin-start-0">Top-left</div>
<div class="velin-position-absolute velin-top-0 velin-end-0">Top-right</div>
<div class="velin-position-absolute velin-bottom-0 velin-start-50">Bottom-center</div>

Centering

Combine inset and translate utilities for absolute centering:

<div class="velin-position-absolute velin-top-50 velin-start-50 velin-translate-middle">
  Centered
</div>
<div class="velin-position-absolute velin-top-0 velin-start-50 velin-translate-middle-x">
  Centered horizontally at top
</div>