Position

Set the positioning mode used to place an element in its containing block.

Use position to choose the reference for offsets and whether a box stays in normal flow. relative keeps its place and anchors absolute children; absolute leaves flow, fixed follows the preview viewport, and sticky sticks within a scrolling ancestor.

Quick reference

Example class	Expected declarations
`static`	`position: static;`
`relative`	`position: relative;`
`absolute`	`position: absolute;`
`sticky`	`position: sticky;`
`fixed`	`position: fixed;`

Example setup

Every preview explicitly starts from spec 1, reset "none", strict mode, spacingUnit "0.25rem", and no breakpoints. Numeric spacing values multiply that unit; no Tailwind theme is inherited. wind-demo classes are authored presentation scaffolding, with their CSS shown beside the exact HTML source.

Examples in use

Keep normal flow

static leaves the box in document flow; the top-4 and left-4 offsets are intentionally ignored.

Keep normal flow

HTML

<div class="wind-demo">
  <div class="wind-demo-frame w-64">
    <div class="wind-demo-tile static top-4 left-4">static ignores these offsets</div>
    <div class="wind-demo-tile">Normal-flow sibling</div>
  </div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.static {
  position: static;
}
.left-4 {
  left: 1rem;
}
.top-4 {
  top: 1rem;
}
.w-64 {
  width: 16rem;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "left-4",
        "static",
        "top-4",
        "w-64"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

Position against a nearby frame

relative stays in flow and establishes the reference box for its absolute child.

Position against a nearby frame

HTML

<div class="wind-demo">
  <div class="wind-demo-frame relative w-72 h-36">
    <div class="wind-demo-note">This box is the containing block.</div>
    <div class="wind-demo-tile absolute bottom-2 right-2">Pinned to this frame</div>
  </div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.bottom-2 {
  bottom: 0.5rem;
}
.right-2 {
  right: 0.5rem;
}
.h-36 {
  height: 9rem;
}
.w-72 {
  width: 18rem;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "absolute",
        "bottom-2",
        "h-36",
        "relative",
        "right-2",
        "w-72"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

Stick within a scroll area

sticky follows normal flow until top-0 reaches the scrollport, then remains there while its containing block continues.

Stick within a scroll area

HTML

<div class="wind-demo">
  <p class="wind-demo-note">Scroll inside the panel to see the heading stick to its top edge.</p>
  <div class="wind-demo-frame h-36 overflow-y-auto">
    <div class="h-12 wind-demo-muted">Earlier content</div>
    <div class="sticky top-0 wind-demo-tile">Sticky section heading</div>
    <div class="h-24 wind-demo-tile">Long section content</div>
    <div class="h-24 wind-demo-muted">More content</div>
  </div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-muted {
  background: #eef1f4;
  color: #64758a;
  border: 1px solid #cbd3dc;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.sticky {
  position: sticky;
}
.top-0 {
  top: 0;
}
.h-12 {
  height: 3rem;
}
.h-24 {
  height: 6rem;
}
.h-36 {
  height: 9rem;
}
.overflow-y-auto {
  overflow-y: auto;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-muted": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "h-12",
        "h-24",
        "h-36",
        "overflow-y-auto",
        "sticky",
        "top-0"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-muted { background: #eef1f4; color: #64758a; border: 1px solid #cbd3dc; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

Pin to the preview viewport

fixed uses bottom-2 and right-2 against the iframe viewport rather than the scroll panel.

Pin to the preview viewport

HTML

<div class="wind-demo">
  <p class="wind-demo-note">The chip is fixed to this preview viewport. Scroll the panel if needed.</p>
  <div class="wind-demo-frame h-36 overflow-y-auto">
    <div class="h-24 wind-demo-muted">Scroll content</div>
    <div class="h-24 wind-demo-tile">More content</div>
  </div>
  <div class="fixed bottom-2 right-2 wind-demo-highlight">Viewport chip</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-highlight {
  background: #f2d794;
  color: #493810;
  border: 1px solid #b39761;
  text-align: center;
}

.wind-demo-muted {
  background: #eef1f4;
  color: #64758a;
  border: 1px solid #cbd3dc;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.fixed {
  position: fixed;
}
.bottom-2 {
  bottom: 0.5rem;
}
.right-2 {
  right: 0.5rem;
}
.h-24 {
  height: 6rem;
}
.h-36 {
  height: 9rem;
}
.overflow-y-auto {
  overflow-y: auto;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-highlight": true,
      "wind-demo-muted": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "bottom-2",
        "fixed",
        "h-24",
        "h-36",
        "overflow-y-auto",
        "right-2"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-highlight { background: #f2d794; color: #493810; border: 1px solid #b39761; text-align: center; }
.wind-demo-muted { background: #eef1f4; color: #64758a; border: 1px solid #cbd3dc; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

Custom and named values

The five class names are exact and have no values. Offset utilities such as top-4 only move positioned boxes; static ignores offsets and cannot anchor absolute descendants. Sticky needs a non-auto inset threshold and a scrolling context. A transformed ancestor can also establish a containing block for fixed descendants in CSS.

Related guides: Utility grammar · Variants

Catalog details

absolute

Field	Value
Catalog identifier	`v1.absolute`
Class pattern	`absolute`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`position` (`2`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`position`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"absolute"`

Declaration templates

Property	Value kind	Fixed value
`position`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`absolute`	`position: absolute`

fixed

Field	Value
Catalog identifier	`v1.fixed`
Class pattern	`fixed`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`position` (`2`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`position`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"fixed"`

Declaration templates

Property	Value kind	Fixed value
`position`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`fixed`	`position: fixed`

relative

Field	Value
Catalog identifier	`v1.relative`
Class pattern	`relative`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`position` (`2`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`position`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"relative"`

Declaration templates

Property	Value kind	Fixed value
`position`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`relative`	`position: relative`

static

Field	Value
Catalog identifier	`v1.static`
Class pattern	`static`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`position` (`2`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`position`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"static"`

Declaration templates

Property	Value kind	Fixed value
`position`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`static`	`position: static`

sticky

Field	Value
Catalog identifier	`v1.sticky`
Class pattern	`sticky`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`position` (`2`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`position`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"sticky"`

Declaration templates

Property	Value kind	Fixed value
`position`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`sticky`	`position: sticky`

Position

Quick reference

Examples in use

Keep normal flow

Position against a nearby frame

Stick within a scroll area

Pin to the preview viewport

Custom and named values

absolute

Accepted values

Declaration templates

Catalog examples

fixed

Accepted values

Declaration templates

Catalog examples

relative

Accepted values

Declaration templates

Catalog examples

static

Accepted values

Declaration templates

Catalog examples

sticky

Accepted values

Declaration templates

Catalog examples

Revision History