> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Positioning

> Control positioning modes with the bundled `static`, `relative`, `absolute`, `fixed`, and `sticky` utilities.

export const RelativeAbsoluteDemo = () => {
  const tagStyle = bg => ({
    position: "absolute",
    padding: "0.5rem 1rem",
    borderRadius: "0.75rem",
    background: bg,
    color: "#ffffff",
    fontSize: "0.75rem",
    fontWeight: 700,
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  });
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.relative + .absolute</span>
        <div className="tw-demo-card" style={{
    position: "relative",
    height: "14rem"
  }}>
          <span style={{
    fontSize: "0.75rem",
    color: "var(--demo-fg-subtle)",
    fontFamily: "ui-monospace, monospace"
  }}>Relative parent</span>
          <div style={{
    ...tagStyle("#a855f7"),
    top: "1rem",
    right: "1rem"
  }}>top right</div>
          <div style={{
    ...tagStyle("#06b6d4"),
    bottom: "1rem",
    left: "1rem"
  }}>bottom left</div>
          <div style={{
    ...tagStyle("#d946ef"),
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)"
  }}>centered</div>
        </div>
      </div>
    </div>;
};

export const StickyDemo = () => {
  const itemStyle = {
    background: "var(--demo-panel-border)",
    borderRadius: "0.375rem",
    padding: "0.75rem",
    fontSize: "0.875rem",
    color: "var(--demo-fg-subtle)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.sticky</span>
        <div className="tw-demo-card" style={{
    height: "10rem",
    overflow: "auto"
  }}>
          <div style={{
    position: "sticky",
    top: 0,
    padding: "0.5rem 1rem",
    background: "#6366f1",
    borderRadius: "0.5rem",
    zIndex: 10,
    color: "#ffffff",
    fontSize: "0.875rem",
    fontWeight: 700,
    marginBottom: "0.75rem"
  }}>Sticky header</div>
          <div style={{
    display: "flex",
    flexDirection: "column",
    gap: "0.5rem"
  }}>
            <div style={itemStyle}>Item 1</div>
            <div style={itemStyle}>Item 2</div>
            <div style={itemStyle}>Item 3</div>
            <div style={itemStyle}>Item 4</div>
            <div style={itemStyle}>Item 5</div>
            <div style={itemStyle}>Item 6</div>
          </div>
        </div>
      </div>
    </div>;
};

## Overview

The framework ships positioning modes, not a full offset utility system. Use the position classes to establish layout behavior, then add offsets with custom CSS or inline styles when a design needs exact placement.

| Class       | CSS                   | Usage                   |
| ----------- | --------------------- | ----------------------- |
| `.static`   | `position: static;`   | Default document flow   |
| `.relative` | `position: relative;` | Anchor child overlays   |
| `.absolute` | `position: absolute;` | Remove from normal flow |
| `.fixed`    | `position: fixed;`    | Lock to the viewport    |
| `.sticky`   | `position: sticky;`   | Stick while scrolling   |

## Relative and Absolute

`.relative` on a parent creates a positioning context. `.absolute` on a child removes it from normal flow and positions it relative to that parent. This is the core pattern for overlays, badges, and pinned elements.

<RelativeAbsoluteDemo />

```html theme={null}
<div class="elementor-element relative background-gray-light padding-8 rounded" style="height: 14rem;">
  <div class="absolute padding-4 background-primary text-white rounded" style="top: 1rem; right: 1rem;">
    Top right
  </div>
  <div class="absolute padding-4 background-secondary text-white rounded" style="bottom: 1rem; left: 1rem;">
    Bottom left
  </div>
</div>
```

## Sticky

`.sticky` keeps an element in normal flow until the user scrolls past a threshold, then pins it. This is useful for section headers, sidebar navigation, and toolbar strips.

<StickyDemo />

```html theme={null}
<div class="elementor-element overflow-auto border-1 border-solid border-gray rounded-lg" style="height: 20rem;">
  <div class="sticky z-10 background-primary text-white padding-3 font-bold" style="top: 0;">
    Sticky header
  </div>
  <div class="padding-4 space-y-3">
    <div class="padding-3 background-gray-light rounded">
      Item 1
    </div>
    <div class="padding-3 background-gray-light rounded">
      Item 2
    </div>
    <div class="padding-3 background-gray-light rounded">
      Item 3
    </div>
  </div>
</div>
```

## Fixed

`.fixed` locks an element to the viewport. It stays in place regardless of scrolling. Use it for sticky headers, floating action buttons, and modal backdrops.

## Z-Index

<Card title="Z-Index Documentation" icon="bring-forward" href="/layout/z-index">
  For the full layering scale and stacking examples, see the Z-Index page.
</Card>

## Best Practices

<Steps>
  <Step title="Choose the Right Position Type">
    Use `static` for normal flow, `relative` for anchoring, `absolute` for overlays, `fixed` for viewport-level UI, and `sticky` for scroll-aware sections.
  </Step>

  <Step title="Add Offsets Explicitly">
    Since the bundle does not ship `top-*`, `left-*`, `right-*`, `bottom-*`, or `inset-*`, add exact offsets with custom CSS when needed.
  </Step>

  <Step title="Combine With Z-Index">
    Layered interfaces usually need both positioning and z-index utilities.
  </Step>

  <Step title="Test Sticky and Fixed UI Carefully">
    These patterns are easy to overuse and can become awkward on smaller screens.
  </Step>
</Steps>

## Related Utilities

<CardGroup cols={2}>
  <Card title="Z-Index" icon="bring-forward" href="/layout/z-index">
    Control stacking order of positioned elements
  </Card>

  <Card title="Layout" href="/concepts/layout">
    Display utilities for positioning patterns
  </Card>
</CardGroup>