Docs / Top / Right / Bottom / Left

Top / Right / Bottom / Left

vel-src: layout.css

Utilities for controlling the placement of positioned elements.

ClassProperties
vel-inset-0inset: 0px
vel-inset-autoinset: auto
vel-inset-x-0left: 0px; right: 0px
vel-inset-y-0top: 0px; bottom: 0px
vel-top-0top: 0px
vel-top-autotop: auto
vel-right-0right: 0px
vel-right-autoright: auto
vel-bottom-0bottom: 0px
vel-bottom-autobottom: auto
vel-left-0left: 0px
vel-left-autoleft: auto

Examples

Absolute positioning

top-0 left-0
top-0 right-0
bottom-0 left-0
bottom-0 right-0
inset-0 (covers all)
example.html
<div class="vel-relative" style="background:#1a2236;border:1px solid #1e2d45;height:140px;border-radius:8px">
  <div class="vel-absolute vel-top-0 vel-left-0 vel-bg-primary vel-text-white" style="padding:4px 10px;border-radius:0 0 6px 0;font-size:11px">top-0 left-0</div>
  <div class="vel-absolute vel-top-0 vel-right-0 vel-bg-success vel-text-white" style="padding:4px 10px;border-radius:0 0 0 6px;font-size:11px">top-0 right-0</div>
  <div class="vel-absolute vel-bottom-0 vel-left-0 vel-bg-danger vel-text-white" style="padding:4px 10px;border-radius:0 6px 0 0;font-size:11px">bottom-0 left-0</div>
  <div class="vel-absolute vel-bottom-0 vel-right-0 vel-bg-warning vel-text-white" style="padding:4px 10px;border-radius:6px 0 0 0;font-size:11px">bottom-0 right-0</div>
  <div class="vel-absolute vel-inset-0 vel-flex vel-items-center vel-justify-center" style="pointer-events:none">
    <span style="color:#64748b;font-size:12px">inset-0 (covers all)</span>
  </div>
</div>