Positioning & Z-Index in Tailwind CSS 4 – Complete Guide

In modern web design, controlling the position of elements is essential for creating layouts like:

  • navigation bars
  • sticky headers
  • modals
  • overlays
  • dropdown menus

Tailwind CSS provides simple utility classes for controlling element positioning and stacking order using z-index.

In this tutorial you will learn:

  • Static positioning
  • Relative positioning
  • Absolute positioning
  • Fixed positioning
  • Sticky positioning
  • Z-index utilities
  • Overlay example
  • Modal example

We will use the Tailwind CSS 4 CDN.

https://unpkg.com/@tailwindcss/browser@4

Step 1: Setup Tailwind CSS CDN

Create a basic HTML file.

<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>

<body class="p-10">

<h1 class="text-3xl font-bold mb-6">
Positioning in Tailwind CSS
</h1>

</body>
</html>

Now you can use positioning utilities.

Position Utilities in Tailwind

Class CSS
static position: static
relative position: relative
absolute position: absolute
fixed position: fixed
sticky position: sticky

Static Position

static is the default positioning behavior.

Elements follow the normal document flow.

Example

<div class="static bg-blue-500 text-white p-4">
Static Position
</div>

Static elements cannot be moved using top, left, right, or bottom.

Relative Position

relative positions an element relative to its normal position.

Example

<div class="relative bg-green-500 text-white p-6">

Relative Container

<div class="absolute top-0 right-0 bg-red-500 p-2">
Badge
</div>

</div>

Explanation:

  • Parent → relative
  • Child → absolute

This is a common pattern for badges or labels.

Absolute Position

absolute positions an element relative to the nearest positioned parent.

Example

<div class="relative h-40 bg-gray-100">

<div class="absolute bottom-4 right-4 bg-blue-500 text-white p-3">
Absolute Element
</div>

</div>

The element appears bottom-right inside the container.

Fixed Position

fixed positions an element relative to the viewport.

It stays fixed even when scrolling.

Example – Fixed Button

<button class="fixed bottom-6 right-6 bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg">
Chat
</button>

This is commonly used for:

  • chat buttons
  • floating action buttons
  • back-to-top buttons

Sticky Position

sticky behaves like relative until it reaches a scroll position, then becomes fixed.

Example – Sticky Header

<header class="sticky top-0 bg-blue-600 text-white p-4">
Sticky Navigation
</header>

<div class="h-[1000px] p-6">
Scroll the page to see sticky behavior
</div>

The header sticks to the top of the screen while scrolling.

Z-Index Utilities

Z-index controls the stacking order of elements.

Higher z-index appears above lower ones.

Tailwind Z-index Classes

Class CSS
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

Example – Z-Index Stacking

<div class="relative h-40">

<div class="absolute left-4 top-4 bg-red-500 p-6 z-10">
Box 1
</div>

<div class="absolute left-8 top-8 bg-blue-500 p-6 z-20">
Box 2
</div>

</div>

Here:

  • z-20 appears above z-10.

Overlay Example

Overlays are used for:

  • modals
  • popups
  • loading screens

Example

<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">

<div class="bg-white p-8 rounded-lg shadow-lg">

<h2 class="text-xl font-semibold mb-4">
Overlay Content
</h2>

<p>This is an overlay example.</p>

<button class="mt-4 bg-blue-600 text-white px-4 py-2 rounded">
Close
</button>

</div>

</div>

Explanation:

  • fixed inset-0 → full-screen overlay
  • bg-black bg-opacity-50 → dark background
  • flex items-center justify-center → center modal

Modal Example

Modals are commonly used for forms, alerts, or confirmations.

Example

<div class="fixed inset-0 flex items-center justify-center bg-black/50">

<div class="bg-white rounded-lg shadow-xl p-6 w-96">

<h2 class="text-xl font-semibold mb-4">
Login Required
</h2>

<p class="text-gray-600 mb-4">
Please login to continue.
</p>

<div class="flex justify-end gap-3">

<button class="px-4 py-2 bg-gray-300 rounded">
Cancel
</button>

<button class="px-4 py-2 bg-blue-600 text-white rounded">
Login
</button>

</div>

</div>

</div>

This creates a centered modal dialog with overlay background.

Real Example – Notification Badge

<div class="relative inline-block">

<img
src="https://picsum.photos/100"
class="rounded-full">

<span class="absolute top-0 right-0 bg-red-500 text-white text-xs px-2 py-1 rounded-full">
3
</span>

</div>

Common use cases:

  • notification badges
  • profile indicators
  • cart counters

Why Positioning is Important

Positioning helps build:

  • dropdown menus
  • modals
  • overlays
  • floating buttons
  • sticky navigation

Tailwind utilities make positioning much easier than traditional CSS.

FAQs

What is positioning in CSS?

Positioning controls where elements appear in a layout.

What does relative do in Tailwind?

relative allows child elements with absolute positioning to position relative to that parent.

What is absolute positioning?

absolute positions elements relative to the nearest parent with positioning.

What is the difference between fixed and sticky?

Property Behavior
fixed Always fixed to viewport
sticky Becomes fixed after scrolling

What is z-index?

Z-index controls which element appears on top when elements overlap.



IT and Digital Marketing
keyboard_arrow_left Previous: Responsive Design in Tailwind CSS 4 – Mobile-First, Breakpoints, Navbar & Card Examples
Next: Background Colors in Tailwind CSS 4 – Complete Guide with Examples keyboard_arrow_right
Online Learner Logo

Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.

Quick Links

Company

© 2023 - 2026 OnlineLearner.in | All Rights Reserved.

logo
Frontend
Backend
Interviews