LEGACY Tailwind CSS v3-era example, archived unchanged. Kept for reference only — it uses the v3 Play CDN and JS config, both removed in v4. Current documentation →

Back to Main Documentation Official Docs

Tailwind CSS Layout & Positioning

Master the art of positioning elements with Tailwind's utility-first approach to layout design

Positioning elements correctly is fundamental to creating well-designed interfaces. Tailwind CSS provides a rich set of utilities to control the positioning, display, and stacking of elements. This guide will take you from the basics to advanced techniques, with practical examples you can start using immediately.

Positioning in Tailwind CSS

Tailwind provides utility classes for controlling how elements are positioned in the DOM. Understanding positioning is crucial for creating layered interfaces, overlays, and precise component placement.

Interactive Demo: Positioning

Parent container (relative)

top-0 left-0

top-0 right-0

bottom-0 left-0

bottom-0 right-0

inset-x-0 (center)

Try resizing your browser to see how positioned elements maintain their positioning behavior.

Position Classes

static: Default positioning (follows normal document flow)
relative: Element positioned relative to its normal position
absolute: Element positioned relative to nearest positioned ancestor
fixed: Element positioned relative to the viewport
sticky: Element positioned based on scroll position

Positioning Example

<div class="relative h-24 bg-blue-100">
  <!-- Parent container -->
  <div class="absolute bottom-0 right-0 
              bg-blue-500 p-2 text-white">
    Positioned bottom-right
  </div>
</div>

This creates a bottom-right positioned element within its container.

Essential Positioning Techniques for Beginners

1. Parent-Child Relationship

For absolute positioning to work properly, the parent must be relative.

Parent (relative)

Child (absolute)

<div class="relative">
  Parent (relative)
  <div class="absolute top-0 right-0">
    Child (absolute)
  </div>
</div>

2. Center an Element Absolutely

Use translate with top/left 50% to center an element.

Centered

<div class="relative h-32">
  <div class="absolute top-1/2 left-1/2 
              -translate-x-1/2 -translate-y-1/2">
    Centered
  </div>
</div>

3. Fixed Position Header

Keep an element fixed at the top of the viewport.

Sticky Header

Scroll down to see the sticky header in action...

The header stays visible!

<div class="sticky top-0 bg-primary text-white p-2">
  Sticky Header
</div>

Common Use Cases:

Modals & Dialogs

Using fixed to position overlays relative to the viewport.

Tooltips & Popovers

Using absolute to position informational elements.

I'm a tooltip!

Display Properties

Display properties determine how elements are rendered in the document flow and how they interact with surrounding elements. Understanding these properties is key to creating proper layouts.

Interactive Demo: Display Properties

First block element

Second block element

Third block element

Block elements take up the full width available and create new lines.

Display Classes

block: Takes up full width, new line before & after
inline: Takes up only necessary width, no new lines
inline-block: Flows inline but respects width/height
flex: Creates a flex container for powerful layouts
grid: Creates a grid container for two-dimensional layouts
hidden: Removes element from the document flow

Display Example

<span class="inline bg-green-100">Inline</span>
<span class="inline-block bg-green-200 w-32">
  Inline-block
</span>
<span class="block bg-green-300">Block</span>

Shows how different display values affect element behavior.

Practical Examples for Beginners

Horizontal Navigation with inline-block

<nav>
  <a href="#" class="inline-block px-4 py-2 
     bg-blue-500 text-white rounded-md">Home</a>
  <a href="#" class="inline-block px-4 py-2 
     text-gray-700 hover:bg-gray-100">About</a>
  ...
</nav>

Card Layout with grid

Card 1

Card 2

Card 3

Card 4

<div class="grid grid-cols-2 gap-2">
  <div class="p-3 bg-gray-100 rounded">Card 1</div>
  <div class="p-3 bg-gray-100 rounded">Card 2</div>
  <div class="p-3 bg-gray-100 rounded">Card 3</div>
  <div class="p-3 bg-gray-100 rounded">Card 4</div>
</div>

Z-Index & Stacking Context

Z-index controls the stacking order of positioned elements, determining which elements appear in front of others.

Z-Index Classes

z-0 through z-50: Predefined z-index values
z-auto: Default stacking order

Note: Z-index only works on positioned elements (not static).

Z-Index Example


<div class="relative h-32">
  <div class="absolute left-0 bg-red-400 z-10">
    First (z-10)
  </div>
  <div class="absolute left-8 bg-blue-400 z-20">
    Second (z-20)
  </div>
</div>

The element with z-20 will appear above the one with z-10.

Float & Clear

While modern layouts often use Flexbox or Grid, floats are still useful for text wrapping around images and other specific use cases.

Float Classes

float-right: Float element to the right
float-left: Float element to the left
float-none: Remove floating
clearfix: Clear floated content within a container

Float Example


<div>
  <img class="float-left h-16 w-16 mr-4" 
       src="/image.jpg">
  <p>This text will wrap around the 
     floated image...</p>
</div>

Creates a classic text wrap around an image.

Best Practices & Tips

Use Flexbox/Grid First: For most layouts, prefer flex and grid over absolute positioning
Be Mindful of Z-index: Excessive z-index values can lead to "z-index wars" – use them sparingly
Remember Mobile: Absolute positioning might need adjustment on smaller screens
Context is Key: Absolute elements need a positioned ancestor (usually relative)
Responsive Considerations: Use responsive variants like md:absolute to change positioning at different breakpoints

Live Examples

Basic Positioning

Relative parent

Absolute child

Corner Positioning

Edge Spanning

Display Classes

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus This is display inline and will wrap normally sapiente ut rerum esse ullam provident, fugit This is display inline-block and will not extend beyond it's parent eos quam This is display block and will move to it's own line reprehenderit est hic aut unde sequi, officia, ipsa amet doloribus ratione ad.

Z-Index

1 (z-40)

2 (default)

3 (z-10)

4 (z-20)

5 (default)

Floats

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere numquam voluptatem accusantium atque cupiditate nulla ratione saepe veniam, ex iure nisi mollitia sed rerum veritatis temporibus iusto! Molestiae, ratione doloribus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis vero sunt hic, placeat quaerat asperiores repellendus porro tempore consequuntur tenetur magni ab delectus excepturi recusandae sequi, nisi at!

Summary & Key Takeaways

What We've Learned

Positioning is essential for controlling the layout and stacking of elements
Tailwind provides utilities for positioning, display, z-index, and float properties
The parent-child relationship is crucial for absolute positioning
Z-index controls the stacking order of elements in the third dimension

Next Steps

Experiment with combining positioning utilities for complex layouts
Create responsive designs that adapt positioning across different screen sizes
Use static positioning for most elements and relative/absolute only when needed
Check out the official Tailwind CSS documentation for more details

Back to Main Documentation