Skip to main content
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.
ClassCSSWhen to use
.blockdisplay: blockFull-width stacking element
.inline-blockdisplay: inline-blockInline element that respects width and height
.flexdisplay: flexBlock-level flex container
.inline-flexdisplay: inline-flexInline flex container (useful inside text)
.hiddendisplay: noneRemove 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.
ClassCSSWhen to use
.overflow-hiddenoverflow: hiddenClip content; also masks child border-radius
.overflow-autooverflow: autoAdd scrollbars only when content overflows
.overflow-visibleoverflow: visibleLet 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.
ClassCSS
.staticposition: static
.relativeposition: relative
.absoluteposition: absolute
.fixedposition: fixed
.stickyposition: 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.
ClassValue
.z-0z-index: 0
.z-10z-index: 10
.z-20z-index: 20
.z-30z-index: 30
.z-40z-index: 40
.z-50z-index: 50
.z-60z-index: 60
.z-70z-index: 70
.z-80z-index: 80
.z-90z-index: 90
.z-100z-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.
ClassCSSWhen to use
.object-containobject-fit: containShow the whole image; letterbox if needed
.object-coverobject-fit: coverFill the frame; crop edges to fit
.object-fillobject-fit: fillStretch to fill — distorts if ratios differ
.object-noneobject-fit: noneRender at intrinsic size; no scaling
.object-scale-downobject-fit: scale-downShrink 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.
ClassRatioCommon use
.aspect-square1:1Avatar frames, product thumbnails
.aspect-video16:9Video 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.