Position

Five bare position values plus four pinned-bar recipes (fixed-top, fixed-bottom, sticky-top, sticky-bottom) that ship a Bootstrap-aligned z-index scale. Every rule uses !important so utilities reliably beat component positioning.

How it works

Bare position classes (.is-static, .is-relative, .is-absolute, .is-fixed, .is-sticky) only set position. Pair with your own top / inset values for placement.
The four pinned-bar recipes ship a complete combo: position, the three or four sides, and an explicit z-index from the framework's stacking scale.
- Fixed bars pin to top: 0 or bottom: 0 and stretch right: 0; left: 0 so they span the viewport.
- Sticky bars pin to top: 0 or bottom: 0 only — the element keeps the inline flow that sticky positioning requires.
z-index defaults follow Bootstrap's well-known scale so Krysalicss composes cleanly with third-party widgets (date pickers, toasts, modals).

Live

Bare position values

Live

Reference frame (.is-relative) .is-absolute

HTML

<div class="is-relative" style="background: var(--kc-default-bg); padding: 1rem; min-height: 4rem;">
Reference frame (.is-relative)
<span class="is-absolute" style="top: 0.25rem; right: 0.25rem; background: var(--kc-primary-bg); color: var(--kc-primary-fg); padding: 0.2rem 0.5rem;">.is-absolute</span>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-position')
);

Playground

Markup

<!-- Bare position values -->
<div class="is-relative">…</div>
<div class="is-absolute">…</div>

<!-- Fixed bar recipes (pin to viewport edge, full width, z-index 1030) -->
<header class="is-fixed-top">App bar</header>
<nav class="is-fixed-bottom">Mobile tab bar</nav>

<!-- Sticky bar recipes (scroll until edge, then pin, z-index 1020) -->
<div class="is-sticky-top">Sticky table header</div>
<div class="is-sticky-bottom">Sticky CTA</div>

Class reference

Class	Declarations	z-index
`.is-static`	`position: static`	—
`.is-relative`	`position: relative`	—
`.is-absolute`	`position: absolute`	—
`.is-fixed`	`position: fixed`	—
`.is-sticky`	`position: sticky`	—
`.is-fixed-top`	`position: fixed; top: 0; right: 0; left: 0`	`1030` (fixed)
`.is-fixed-bottom`	`position: fixed; right: 0; bottom: 0; left: 0`	`1030` (fixed)
`.is-sticky-top`	`position: sticky; top: 0`	`1020` (sticky)
`.is-sticky-bottom`	`position: sticky; bottom: 0`	`1020` (sticky)

z-index scale

Key	Value
`dropdown`	`1000`
`sticky`	`1020`
`fixed`	`1030`
`modal`	`1055`

Variables

Variable	Default	Notes
`$selector-prefix`	`'.is-'` (from framework root)	Re-uses `variables.$selector-prefix-is`. Override to alias every position utility under a different prefix.
`$positions`	`(static, relative, absolute, fixed, sticky)`	Bare values that get an `.is-<value>` class. Drop entries to shave bytes.
`$z-indices`	`(dropdown: 1000, sticky: 1020, fixed: 1030, modal: 1055)`	Stacking scale; the helper only uses `fixed` and `sticky` directly, but the full map is exposed so consumers can re-use the keys elsewhere.

Override example

@use '@adnap/krysalicss/helper/position' with (
  // Trim the set of bare position values:
  $positions: (relative, absolute, sticky),
  // Or shift the z-index scale to match your stacking context:
  $z-indices: (
    dropdown: 500,
    sticky:   600,
    fixed:    700,
    modal:    1000,
  ),
);

Tokens consumed

None — position helpers emit literal CSS values. The z-index scale is applied at compile time from $z-indices, not via a custom property.