Position 1.2.0

Setze Positionstyp, Inset-Kanten und Zentrierung mit Utility-Klassen. English: Position

Reifegrad: Dokumentiert als stabil in VelinStyle 1.2.0. Studio und die vollstaendige Utility Engine bleiben geplant — ausgelieferte Utilities werden manuell unter @layer utilities, kein vollstaendiger Variantengenerator.

Wann verwenden

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

Wann nicht

Bevorzuge dokumentierte z-index-Tokens statt beliebiger Stacking-Zahlen.

Positionswerte

<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

Zentrierung

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