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

# Layout

> Display, overflow, object-fit, aspect-ratio, positioning, and z-index utilities.

<div className="sk-theme-hero not-prose">
  <img style={{ borderRadius: "0.5rem", width: "100%", height: "auto" }} src="https://mintcdn.com/skelementor/4oZ9ucvfw4_Z4_Bt/images-for-overview/Layout.png?fit=max&auto=format&n=4oZ9ucvfw4_Z4_Bt&q=85&s=01732841bb5b6320eb7e1ff59a6f2dde" className="dark:hidden block" alt="Layout overview cover" width="4054" height="2489" data-path="images-for-overview/Layout.png" />

  <img style={{ borderRadius: "0.5rem", width: "100%", height: "auto" }} src="https://mintlify.s3.us-west-1.amazonaws.com/skelementor/images-for-overview/Layout%20-%20Dark.png" className="hidden dark:block" alt="Layout overview cover (dark)" />
</div>

## Overview

Layout utilities control how blocks display, clip, position, layer, and frame media.

<CardGroup cols={2}>
  <Card title="Display" icon="display" href="/layout/display">
    Block, inline-block, flex, inline-flex, and hidden helpers
  </Card>

  <Card title="Overflow" icon="cube" href="/layout/overflow">
    Clip or scroll overflowing content with the bundled overflow helpers
  </Card>

  <Card title="Positioning" icon="arrows-up-down-left-right" href="/layout/positioning">
    Static, relative, absolute, fixed, and sticky layout placement
  </Card>

  <Card title="Object Fit" icon="object-intersect" href="/layout/object-fit">
    Tailwind-style object-fit utilities for images and video in fixed frames
  </Card>

  <Card title="Aspect Ratio" icon="bring-forward" href="/layout/aspect-ratio">
    Square, video, and auto aspect utilities
  </Card>

  <Card title="Z-Index" icon="bring-forward" href="/layout/z-index">
    Layering helpers for stacked interfaces and overlays
  </Card>
</CardGroup>

## What Ships Here

* Display: `.block`, `.inline-block`, `.flex`, `.inline-flex`, `.hidden`
* Overflow: `.overflow-hidden`, `.overflow-auto`, `.overflow-visible`
* Positioning: `.static`, `.relative`, `.absolute`, `.fixed`, `.sticky`
* Object fit: `.object-contain`, `.object-cover`, `.object-fill`, `.object-none`, `.object-scale-down`
* Aspect ratio: `.aspect-square`, `.aspect-video`, `.aspect-auto`
* Z-index: `.z-0` through `.z-100` in steps of 10

## Related Utilities

<CardGroup cols={2}>
  <Card title="Spacing" icon="arrows-to-line" href="/concepts/spacing">
    Margin and padding for layout spacing
  </Card>

  <Card title="Sizing" icon="expand" href="/concepts/sizing">
    Width and height utilities for layout
  </Card>
</CardGroup>