Position 1.2.2

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

Maturity: Documented as stable in VelinStyle 1.2.0. Studio and the complete Utility Engine remain planned — shipping utilities are hand-authored under @layer utilities, not a full variant generator.

When to use

Position overlays, sticky headers, and anchors with position utilities.
Rings live here (.velin-ring-*) alongside inset helpers.

When not

Prefer documented z-index tokens over arbitrary stacking numbers.

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>

Static (default)

Relative

Absolute

Fixed

Sticky

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>

Top-left

Top-right

Bottom-center

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>

Centered

Centered horizontally at top