Layout utilities are the foundation of building with Tailwind CSS. They control how elements are displayed, positioned, and stacked on the page. In this lesson, you'll learn to use display, position, float, overflow, and z-index utilities to create sophisticated layouts without writing a single line of custom CSS.
Display Utilities
The display property is fundamental to CSS layout. It determines how an element behaves in the document flow.
Block Display
Block elements take up the full width available and start on a new line:
<!-- Block elements stack vertically -->
<div class="block">I'm a block element</div>
<div class="block">I'm also a block element</div>
<div class="block">We each take up the full width</div>Common block utilities:
block- Display as a block elementinline-block- Inline but accepts width and heightinline- Flows with text content
Inline Display
Inline elements flow within text and don't start new lines:
<p>
This is a paragraph with
<span class="inline">an inline span</span>
that flows naturally with the text.
</p>Inline-Block Display
Gets the best of both worlds—flows inline but can have width and height:
<!-- These boxes sit side by side but can have dimensions -->
<div class="inline-block w-32 h-32 bg-blue-500"></div>
<div class="inline-block w-32 h-32 bg-green-500"></div>
<div class="inline-block w-32 h-32 bg-purple-500"></div>Flex and Grid Display
Modern layout systems (we'll cover these in detail soon):
<!-- Flexbox container -->
<div class="flex gap-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<!-- Grid container -->
<div class="grid grid-cols-3 gap-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>Hiding Elements
<!-- Completely remove from layout -->
<div class="hidden">You can't see me!</div>
<!-- Hide on small screens, show on medium+ -->
<div class="hidden md:block">Visible on tablets and up</div>
<!-- Show on mobile, hide on desktop -->
<div class="block lg:hidden">Visible on mobile only</div>Display Utilities Explorer
See how different display values affect layout
Utilities
Current Classes:
bg-blue-500 text-white p-4 m-2Preview
Position Utilities
Position utilities control how elements are positioned in the document flow. This is crucial for creating overlays, tooltips, modals, and complex layouts.
Static (Default)
Elements are positioned according to the normal document flow:
<div class="static">
I follow the normal document flow
</div>Relative
Element is positioned relative to its normal position. It still occupies its original space:
<div class="relative top-4 left-4">
I'm shifted 1rem (16px) down and right from my normal position
</div>
<!-- Common use: Creating a positioning context for absolute children -->
<div class="relative">
<div class="absolute top-0 right-0">
I'm positioned relative to my parent
</div>
</div>Absolute
Element is removed from the normal flow and positioned relative to its nearest positioned ancestor:
<!-- Parent with relative creates positioning context -->
<div class="relative h-64 bg-gray-200">
<!-- Child positioned in top-right corner -->
<div class="absolute top-0 right-0 bg-blue-500 text-white p-4">
Top Right
</div>
<!-- Child positioned in bottom-left corner -->
<div class="absolute bottom-0 left-0 bg-green-500 text-white p-4">
Bottom Left
</div>
<!-- Child centered -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-purple-500 text-white p-4">
Centered
</div>
</div>💡 Positioning Pattern
Common pattern: Parent with relative, child with absolute.
This lets you position children anywhere within the parent without affecting other elements.
Fixed
Element is positioned relative to the viewport and stays in place when scrolling:
<!-- Fixed navigation bar at top -->
<nav class="fixed top-0 left-0 right-0 bg-white shadow-md z-50">
<div class="max-w-7xl mx-auto px-4 py-3">
Navigation content
</div>
</nav>
<!-- Fixed "Back to Top" button in bottom-right -->
<button class="fixed bottom-4 right-4 bg-blue-500 text-white p-3 rounded-full shadow-lg">
↑
</button>Sticky
Element toggles between relative and fixed based on scroll position:
<!-- Sticky header - sticks to top when scrolling -->
<div class="sticky top-0 bg-white shadow-md z-10">
<h2 class="text-2xl font-bold p-4">Section Title</h2>
</div>
<!-- Content below -->
<div class="p-4">
Long content that scrolls...
</div>Position Offset Utilities
Use these with positioned elements:
top-0,top-4,top-1/2- Distance from topright-0,right-4- Distance from rightbottom-0,bottom-4- Distance from bottomleft-0,left-4- Distance from leftinset-0- All sides at 0 (useful for overlays)
Real-World Position Example: Modal Overlay
<!-- Modal overlay covering entire screen -->
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<!-- Modal content centered -->
<div class="relative bg-white rounded-lg p-8 max-w-md w-full">
<h2 class="text-2xl font-bold mb-4">Modal Title</h2>
<p class="mb-6">Modal content goes here...</p>
<!-- Close button in top-right of modal -->
<button class="absolute top-2 right-2 text-gray-500 hover:text-gray-700">
✕
</button>
<button class="bg-blue-500 text-white px-6 py-2 rounded">
Confirm
</button>
</div>
</div>Float Utilities
Float utilities let elements float to the left or right, with text wrapping around them. While less common with modern Flexbox/Grid, floats are still useful for text wrapping:
<!-- Float image to the left, text wraps around -->
<div>
<img
src="image.jpg"
alt="Description"
class="float-left mr-4 mb-4 w-48 h-48 rounded-lg"
>
<p>
This text will wrap around the floated image on the left.
The image stays to the left side while the text flows
naturally around it. This is great for article layouts
where you want images integrated with text content.
</p>
</div>
<!-- Float to right -->
<div>
<img
src="image.jpg"
alt="Description"
class="float-right ml-4 mb-4 w-48 h-48 rounded-lg"
>
<p>
This text wraps around an image floated to the right...
</p>
</div>
<!-- Clear floats -->
<div class="clear-both">
This content appears below all floated elements
</div>Available float utilities:
float-left- Float element to the leftfloat-right- Float element to the rightfloat-none- Remove floatclear-left- Clear left floatsclear-right- Clear right floatsclear-both- Clear all floatsclear-none- Don't clear floats
Modern Alternative: For most layouts, Flexbox and Grid are better than floats. Use floats primarily for wrapping text around images in content areas.
Overflow Utilities
Overflow utilities control what happens when content is too large for its container:
Overflow Hidden
Clip content that exceeds the container:
<!-- Content that exceeds height is hidden -->
<div class="h-32 overflow-hidden bg-gray-100 p-4">
This is a lot of content that exceeds the height of the container.
Everything beyond 128px height will be clipped and hidden from view.
You won't be able to scroll to see it.
</div>
<!-- Great for truncating text -->
<div class="w-48 overflow-hidden">
<p class="truncate">
This very long text will be truncated with an ellipsis...
</p>
</div>Overflow Scroll
Always show scrollbars:
<!-- Vertical scrolling -->
<div class="h-64 overflow-y-scroll bg-gray-100 p-4">
Long content here...
<br>More lines...
<br>Even more lines...
<br>Scrollbars are always visible
</div>
<!-- Horizontal scrolling -->
<div class="w-64 overflow-x-scroll bg-gray-100 p-4">
<div class="w-[800px]">
This content is wider than the container
</div>
</div>Overflow Auto
Show scrollbars only when needed:
<!-- Scrollbar appears only if content overflows -->
<div class="h-64 overflow-auto bg-gray-100 p-4">
If this content exceeds 256px height, a scrollbar will appear.
Otherwise, no scrollbar is shown.
</div>
<!-- Common for code blocks -->
<div class="overflow-x-auto">
<pre class="bg-gray-900 text-white p-4">
<code>
function veryLongFunctionName(param1, param2, param3) {
// Long code that might need horizontal scrolling
}
</code>
</pre>
</div>Overflow Visible (Default)
Content overflows visibly outside the container:
<div class="h-32 overflow-visible bg-gray-100 p-4">
Content can overflow and be visible outside the container bounds
</div>Available overflow utilities:
overflow-auto- Scroll if needed (recommended)overflow-hidden- Clip overflowing contentoverflow-visible- Show overflowing contentoverflow-scroll- Always show scrollbarsoverflow-x-auto- Horizontal scroll if neededoverflow-y-auto- Vertical scroll if neededoverflow-x-hidden- Clip horizontal overflowoverflow-y-hidden- Clip vertical overflow
📱 Mobile Scrolling
On touch devices, add overscroll-contain to prevent scroll chaining (scrolling past the element affects the parent).
Text Overflow
Special utilities for handling text overflow:
<!-- Truncate with ellipsis -->
<div class="w-48 truncate">
This text is too long and will be truncated with...
</div>
<!-- Clip text (no ellipsis) -->
<div class="w-48 overflow-hidden text-ellipsis">
This text will be clipped
</div>
<!-- Multi-line truncation (requires line-clamp) -->
<div class="w-64 line-clamp-3">
This text will be truncated after 3 lines with an ellipsis.
Any content beyond the third line will be hidden.
This is perfect for preview text in cards.
</div>Z-Index Utilities
Z-index controls the stacking order of positioned elements. Higher values appear above lower values:
<!-- Layering elements -->
<div class="relative">
<!-- Background layer -->
<div class="absolute inset-0 bg-blue-200 z-0">
Bottom layer
</div>
<!-- Middle layer -->
<div class="absolute top-4 left-4 bg-green-300 p-4 z-10">
Middle layer
</div>
<!-- Top layer -->
<div class="absolute top-8 left-8 bg-purple-400 p-4 z-20">
Top layer
</div>
</div>Available z-index utilities:
z-0- z-index: 0z-10- z-index: 10z-20- z-index: 20z-30- z-index: 30z-40- z-index: 40z-50- z-index: 50 (highest default)-z-10- Negative z-index (behind)z-auto- z-index: auto
Common Z-Index Hierarchy
Recommended z-index scale for typical projects:
z-0- Base contentz-10- Dropdowns, tooltipsz-20- Sticky headersz-30- Fixed navigationz-40- Modals, overlaysz-50- Toasts, notifications (highest)
Real-World Example: Layered UI
<!-- Fixed navigation (high z-index) -->
<nav class="fixed top-0 left-0 right-0 bg-white shadow-md z-30">
Navigation
</nav>
<!-- Page content -->
<main class="relative z-0">
<!-- Dropdown menu (medium z-index) -->
<div class="relative">
<button>Menu</button>
<div class="absolute top-full left-0 bg-white shadow-lg z-10">
Dropdown items
</div>
</div>
</main>
<!-- Modal overlay (highest z-index) -->
<div class="fixed inset-0 bg-black bg-opacity-50 z-40">
<div class="bg-white rounded-lg p-8 z-50">
Modal content
</div>
</div>
<!-- Toast notification (above everything) -->
<div class="fixed top-4 right-4 bg-green-500 text-white p-4 rounded-lg z-50">
Success!
</div>⚠️ Z-Index Best Practices
- Only use z-index with positioned elements
- Use consistent scale (10, 20, 30) not random values
- Document your z-index hierarchy
- Avoid z-index wars—if you need z-index: 9999, something's wrong
Practical Layout Examples
Example 1: Hero Section with Overlay
<div class="relative h-screen">
<!-- Background image -->
<img
src="hero.jpg"
alt="Hero"
class="absolute inset-0 w-full h-full object-cover z-0"
>
<!-- Dark overlay -->
<div class="absolute inset-0 bg-black bg-opacity-50 z-10"></div>
<!-- Content on top -->
<div class="relative z-20 flex items-center justify-center h-full text-white">
<div class="text-center">
<h1 class="text-5xl font-bold mb-4">Welcome</h1>
<p class="text-xl mb-8">Your journey starts here</p>
<button class="bg-blue-500 px-8 py-3 rounded-lg hover:bg-blue-600">
Get Started
</button>
</div>
</div>
</div>Example 2: Sticky Sidebar
<div class="flex gap-8">
<!-- Sticky sidebar -->
<aside class="w-64 flex-shrink-0">
<div class="sticky top-4">
<nav class="bg-white rounded-lg shadow p-4">
<ul class="space-y-2">
<li><a href="#" class="block hover:bg-gray-100 p-2 rounded">Link 1</a></li>
<li><a href="#" class="block hover:bg-gray-100 p-2 rounded">Link 2</a></li>
<li><a href="#" class="block hover:bg-gray-100 p-2 rounded">Link 3</a></li>
</ul>
</nav>
</div>
</aside>
<!-- Main content that scrolls -->
<main class="flex-1">
<div class="bg-white rounded-lg shadow p-6">
Long scrolling content...
</div>
</main>
</div>Example 3: Badge on Avatar
<div class="relative inline-block">
<!-- Avatar -->
<img
src="avatar.jpg"
alt="User"
class="w-16 h-16 rounded-full"
>
<!-- Online status badge -->
<div class="absolute bottom-0 right-0 w-4 h-4 bg-green-500 border-2 border-white rounded-full z-10"></div>
</div>Example 4: Card with Ribbon
<div class="relative bg-white rounded-lg shadow-lg p-6 overflow-hidden">
<!-- Corner ribbon -->
<div class="absolute top-0 right-0 bg-red-500 text-white px-8 py-1 transform rotate-45 translate-x-8 -translate-y-4">
Sale
</div>
<h3 class="text-xl font-bold mb-2">Product Name</h3>
<p class="text-gray-600 mb-4">Product description...</p>
<p class="text-2xl font-bold text-blue-600">$99.99</p>
</div>Interactive Practice
Experiment with layout utilities to see how they work together:
Layout Utilities Playground
Try different positioning and display combinations
Key Takeaways
block,inline, andinline-blockcontrol how elements flowrelativecreates a positioning context for absolute childrenabsoluteremoves elements from the normal flowfixedpositions elements relative to the viewportstickytoggles between relative and fixed based on scroll- Use
overflow-hiddento clip content,overflow-autoto add scrollbars when needed - Z-index only works on positioned elements (not static)
- Use consistent z-index values (10, 20, 30) for maintainability
- Combine utilities to create complex layouts without custom CSS
What's Next?
You've mastered the fundamental layout utilities! Now you're ready to learn about the most powerful layout system in modern CSS: Flexbox.
In the next lesson, we'll explore Flexbox Utilities—learning how to create flexible, responsive layouts with justify, align, direction, and gap utilities.
🎯 Practice Challenge!
Try recreating a common layout pattern using only the utilities you learned: Create a header that sticks to the top with a logo on the left and navigation on the right!