Files

zguiyang bbb2f41591 feat: add new OpenSpec skills for change management and onboarding

- Created `openspec-ff-change` skill for fast-forward artifact creation.
- Introduced `openspec-new-change` skill for structured change creation.
- Developed `openspec-onboard` skill for guided onboarding through OpenSpec workflow.
- Added `openspec-sync-specs` skill for syncing delta specs to main specs.
- Implemented `openspec-verify-change` skill for verifying implementation against change artifacts.
- Updated `.gitignore` to exclude OpenSpec generated files.
- Added `skills-lock.json` to manage skill dependencies.

2026-03-13 13:18:03 +08:00

2.2 KiB

Raw Permalink Blame History

name, description

name	description
layout-position	Controlling element positioning with static, relative, absolute, fixed, and sticky utilities

Position

Utilities for controlling how an element is positioned in the document.

Usage

Static positioning

Use static to position an element according to the normal flow. Offsets are ignored and it won't act as a position reference for absolutely positioned children:

<div class="static">
  <p>Static parent</p>
  <div class="absolute bottom-0 left-0">
    <p>Absolute child</p>
  </div>
</div>

Relative positioning

Use relative to position an element in normal flow. Offsets are calculated relative to the element's normal position, and it acts as a position reference for absolutely positioned children:

<div class="relative">
  <p>Relative parent</p>
  <div class="absolute bottom-0 left-0">
    <p>Absolute child</p>
  </div>
</div>

Absolute positioning

Use absolute to position an element outside the normal flow. Neighboring elements act as if it doesn't exist. Offsets are calculated relative to the nearest positioned parent:

<div class="relative">
  <div class="absolute top-0 right-0">
    <p>Absolute child</p>
  </div>
</div>

Fixed positioning

Use fixed to position an element relative to the browser window. Offsets are calculated relative to the viewport:

<div class="fixed top-0 right-0 left-0">
  <p>Fixed header</p>
</div>

Sticky positioning

Use sticky to position an element as relative until it crosses a threshold, then treat it as fixed until its parent is off screen:

<div>
  <div class="sticky top-0">
    <p>Sticky header</p>
  </div>
  <div>Content...</div>
</div>

Key Points

static is the default - elements flow normally
relative maintains normal flow but allows offsets and becomes a positioning context
absolute removes from flow and positions relative to nearest positioned ancestor
fixed positions relative to viewport, stays in place when scrolling
sticky combines relative and fixed behavior based on scroll position
Always use with offset utilities like top-0, right-0, inset-0, etc.

2.2 KiB Raw Permalink Blame History