Position 定位

<div class="pvs-relative pvs-p-8 pvs-border pvs-bg-surface-muted" style="min-height:7rem">
  <span class="pvs-absolute pvs-top-2 pvs-left-2 pvs-p-2 pvs-border pvs-bg-surface">左上</span>
  <span class="pvs-absolute pvs-bottom-2 pvs-right-2 pvs-p-2 pvs-border pvs-bg-surface">右下</span>
</div>

<div class="pvs-relative pvs-border" style="height:6rem">
  <img class="pvs-absolute pvs-inset-0 pvs-w-full pvs-h-full pvs-object-cover" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120'%3E%3Crect fill='%23cbd5e1' width='100%25' height='100%25'/%3E%3C/svg%3E" alt="" />
  <span class="pvs-absolute pvs-inset-0 pvs-flex pvs-items-center pvs-justify-center" style="background:rgb(15 23 42 / 40%);color:#fff">遮罩文案</span>
</div>

<div class="pvs-relative pvs-border" style="max-height:8rem;overflow:auto">
  <div class="pvs-sticky pvs-top-0 pvs-p-2 pvs-bg-surface pvs-border pvs-z-10 pvs-shadow-sm">吸顶条 · 在滚动容器内</div>
  <div class="pvs-p-4" style="height:12rem">向下滚…</div>
</div>

<div class="pvs-relative pvs-p-6 pvs-border">
  <span class="pvs-absolute pvs-top-4 pvs-left-4 pvs-p-3 pvs-border pvs-bg-surface-muted pvs-z-0">z-0</span>
  <span class="pvs-absolute pvs-top-6 pvs-left-8 pvs-p-3 pvs-border pvs-bg-primary pvs-z-10" style="color:#fff">z-10 在上</span>
</div>

<div class="pvs-relative pvs-p-10 pvs-border">
  <span class="pvs-absolute pvs-top-4 pvs-right-4 pvs-p-1 pvs-border pvs-bg-surface">top-4 right-4</span>
</div>

<div class="pvs-relative pvs-p-8 pvs-border">
  <span class="pvs-absolute pvs-top-2 md:pvs-top-4 pvs-right-2 pvs-border pvs-p-1 pvs-bg-surface">偏移随断点</span>
</div>