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

# Layout Utilities: Display, Overflow, and Positioning

> Control display, overflow, and positioning for Elementor elements with AtomicKit's layout utilities — from block and flex to z-index and object-fit.

AtomicKit's layout utilities give you direct control over how any Elementor element renders and occupies space on the page — without touching the element's style panel or writing custom CSS for common patterns. You apply these classes in the **CSS Classes** field of any widget or container, and they take effect immediately across your design.

<CardGroup cols={3}>
  <Card title="Display" icon="square" href="#display">
    Switch between block, inline, and flex rendering modes
  </Card>

  <Card title="Overflow" icon="scissors" href="#overflow">
    Clip, scroll, or expose content that exceeds its container
  </Card>

  <Card title="Positioning" icon="crosshairs" href="#positioning">
    Control stacking flow with static, relative, absolute, and more
  </Card>

  <Card title="Object Fit" icon="image" href="#object-fit">
    Scale and crop images and videos within fixed frames
  </Card>

  <Card title="Aspect Ratio" icon="rectangle-wide" href="#aspect-ratio">
    Lock containers to square, video, or auto proportions
  </Card>

  <Card title="Z-Index" icon="layer-group" href="#z-index">
    Layer overlapping elements with a predictable stacking order
  </Card>
</CardGroup>

## Display

The display utilities set an element's outer rendering role. Use them to override Elementor's default display values or to turn any widget into a flex container on the spot.

| Class           | CSS                     | When to use                                   |
| --------------- | ----------------------- | --------------------------------------------- |
| `.block`        | `display: block`        | Full-width stacking element                   |
| `.inline-block` | `display: inline-block` | Inline element that respects width and height |
| `.flex`         | `display: flex`         | Block-level flex container                    |
| `.inline-flex`  | `display: inline-flex`  | Inline flex container (useful inside text)    |
| `.hidden`       | `display: none`         | Remove from layout entirely                   |

The most common pattern is turning a container into a flex row to align children side by side:

```html theme={null}
<div class="flex items-center gap-4">
  <img src="logo.svg" alt="Logo" />
  <span>Brand Name</span>
</div>
```

<Tip>
  Use `.hidden` together with responsive suffixes — for example `.hidden--on-s` — to show or hide elements at specific breakpoints without duplicating widgets.
</Tip>

## Overflow

Overflow utilities control what happens when content is larger than its container. They are especially useful for card components, image wrappers, and sticky headers.

| Class               | CSS                 | When to use                                  |
| ------------------- | ------------------- | -------------------------------------------- |
| `.overflow-hidden`  | `overflow: hidden`  | Clip content; also masks child border-radius |
| `.overflow-auto`    | `overflow: auto`    | Add scrollbars only when content overflows   |
| `.overflow-visible` | `overflow: visible` | Let content extend beyond the container box  |

A common card pattern pairs `.overflow-hidden` with a border-radius utility so that a child image respects the card's rounded corners:

```html theme={null}
<div class="overflow-hidden rounded-lg">
  <img src="card-thumbnail.jpg" alt="Card image" />
  <div class="p-4">
    <h3>Card Title</h3>
    <p>Card description text.</p>
  </div>
</div>
```

## Positioning

Positioning utilities map directly to the CSS `position` property. Use them to step elements in or out of the normal document flow.

| Class       | CSS                  |
| ----------- | -------------------- |
| `.static`   | `position: static`   |
| `.relative` | `position: relative` |
| `.absolute` | `position: absolute` |
| `.fixed`    | `position: fixed`    |
| `.sticky`   | `position: sticky`   |

<Warning>
  AtomicKit does not ship `top-*`, `left-*`, `right-*`, `bottom-*`, or `inset-*` offset utilities. After you apply a positioning class, add exact offsets with a small custom CSS rule when needed.
</Warning>

### Relative + Absolute pattern

The most frequent use case is anchoring a badge or overlay to a parent. Give the parent `.relative` and the child `.absolute`, then add offsets with custom CSS:

```html theme={null}
<div class="relative">
  <img src="product.jpg" alt="Product" />
  <div class="absolute" style="top: 1rem; right: 1rem;">
    Sale
  </div>
</div>
```

The `.absolute` child is positioned relative to its nearest `.relative` ancestor, not the page.

### Sticky positioning

Use `.sticky` to keep a navigation bar or section header attached to the viewport as the user scrolls, while it still participates in normal flow when it first appears:

```html theme={null}
<nav class="sticky">
  <!-- nav content -->
</nav>
```

<Note>
  For `.sticky` to work, the element's scrollable ancestor must not have `overflow: hidden` applied. If the header disappears instead of sticking, check parent overflow values.
</Note>

## Z-Index

AtomicKit ships z-index utilities from `z-0` to `z-100` in steps of 10.

| Class    | Value          |
| -------- | -------------- |
| `.z-0`   | `z-index: 0`   |
| `.z-10`  | `z-index: 10`  |
| `.z-20`  | `z-index: 20`  |
| `.z-30`  | `z-index: 30`  |
| `.z-40`  | `z-index: 40`  |
| `.z-50`  | `z-index: 50`  |
| `.z-60`  | `z-index: 60`  |
| `.z-70`  | `z-index: 70`  |
| `.z-80`  | `z-index: 80`  |
| `.z-90`  | `z-index: 90`  |
| `.z-100` | `z-index: 100` |

<Warning>
  `z-index` only works when the element also has a non-static position. Always pair a `z-*` class with `.relative`, `.absolute`, `.fixed`, or `.sticky`. A `z-*` class on a `.static` element has no effect.
</Warning>

```html theme={null}
<!-- Correct: absolute badge on top of siblings -->
<div class="absolute z-10" style="top: 0.5rem; right: 0.5rem;">
  New
</div>
```

## Object Fit

Object-fit utilities control how a replaced element (image or video) scales inside its container. They are most useful when you fix the container's dimensions and want consistent cropping or letterboxing across different source aspect ratios.

| Class                | CSS                      | When to use                                 |
| -------------------- | ------------------------ | ------------------------------------------- |
| `.object-contain`    | `object-fit: contain`    | Show the whole image; letterbox if needed   |
| `.object-cover`      | `object-fit: cover`      | Fill the frame; crop edges to fit           |
| `.object-fill`       | `object-fit: fill`       | Stretch to fill — distorts if ratios differ |
| `.object-none`       | `object-fit: none`       | Render at intrinsic size; no scaling        |
| `.object-scale-down` | `object-fit: scale-down` | Shrink to fit but never enlarge             |

A typical product image grid uses `.object-cover` so every thumbnail fills its fixed frame without distortion regardless of the original upload dimensions:

```html theme={null}
<div class="aspect-square overflow-hidden rounded-lg">
  <img class="object-cover" src="product.jpg" alt="Product" />
</div>
```

## Aspect Ratio

Aspect ratio utilities lock a container's proportions so its height scales automatically with its width. This keeps media frames consistent across different screen sizes without fixed pixel heights.

| Class            | Ratio | Common use                              |
| ---------------- | ----- | --------------------------------------- |
| `.aspect-square` | 1:1   | Avatar frames, product thumbnails       |
| `.aspect-video`  | 16:9  | Video embeds, hero banners              |
| `.aspect-auto`   | —     | Remove a previously applied fixed ratio |

```html theme={null}
<!-- 16:9 video embed that scales with the column width -->
<div class="aspect-video overflow-hidden rounded-lg">
  <iframe src="https://www.youtube.com/embed/..." class="object-cover"></iframe>
</div>
```

## Responsive Variants

Every structural layout utility in this page supports AtomicKit's `--on-*` responsive suffix. Append the suffix to target a specific breakpoint:

```html theme={null}
<!-- Hidden on small screens, block on medium and up -->
<div class="hidden block--on-m">
  Sidebar content
</div>

<!-- Relative by default, sticky on large screens -->
<nav class="relative sticky--on-l">
  Navigation
</nav>
```

<Info>
  Responsive suffixes follow the mobile-first convention: `--on-s`, `--on-m`, `--on-l`, and `--on-xl`. A class without a suffix applies at all viewport sizes.
</Info>