Layout Utilities: Display, Overflow, and Positioning

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.

Display

Switch between block, inline, and flex rendering modes

Overflow

Clip, scroll, or expose content that exceeds its container

Positioning

Control stacking flow with static, relative, absolute, and more

Object Fit

Scale and crop images and videos within fixed frames

Aspect Ratio

Lock containers to square, video, or auto proportions

Z-Index

Layer overlapping elements with a predictable stacking order

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:

<div class="flex items-center gap-4">
  <img src="logo.svg" alt="Logo" />
  <span>Brand Name</span>
</div>

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

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:

<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`

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.

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:

<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:

<nav class="sticky">
  <!-- nav content -->
</nav>

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.

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`

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.

<!-- 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:

<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

<!-- 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:

<!-- 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>

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.

Get Started

Colors & Typography

Spacing & Sizing

Layout & Flexbox

Borders & Effects

Plugin - Dashboard Overview

Design Tokens

Import & Export

Layout Utilities: Display, Overflow, and Positioning

Display

Overflow

Positioning

Object Fit

Aspect Ratio

Z-Index

Display

Overflow

Positioning

Relative + Absolute pattern

Sticky positioning

Z-Index

Object Fit

Aspect Ratio

Responsive Variants

Display

Overflow

Positioning

Object Fit

Aspect Ratio

Z-Index

​Display

​Overflow

​Positioning

​Relative + Absolute pattern

​Sticky positioning

​Z-Index

​Object Fit

​Aspect Ratio

​Responsive Variants

Display

Overflow

Positioning

Relative + Absolute pattern

Sticky positioning

Z-Index

Object Fit

Aspect Ratio

Responsive Variants