Positioning and Z-Index

🧑‍🏫 Sabse pehle — simple mein samjho#

Agar tumhe screen pe kisi element ko utha kar doosre element ke upar rakhna hai, ya kisi button ko scroll karte waqt upar chipkaye rakhna hai (jaise header), toh hum CSS positioning use karte hain. relative parent ke liye hota hai aur absolute child ke liye (taaki child freely parent ke andar move kar sake). z-index layer number hota hai — jiska z jyada hoga, wo screen ke aage (top par) dikhega.

The Positioning Classes#

Tailwind provides straightforward classes for all standard CSS position properties.

• static (The default behavior - elements flow naturally on the page)
• relative (Positions the element relative to its normal position. Most importantly, it creates an anchor point for absolute children)
• absolute (Removes the element from the normal document flow and positions it relative to its closest relative parent)
• fixed (Fixes the element to the browser viewport - great for sticky headers or floating action buttons)
• sticky (Acts like relative until the user scrolls past it, then it "sticks" to the top of the screen)

Top, Right, Bottom, Left (TRBL)#

Once an element is positioned (e.g., absolute), you use inset properties to move it around. Tailwind uses the exact same spacing scale as padding and margin.

• top-0, top-4, -top-2 (Negative values work here too)
• right-0, bottom-0, left-0
• The Inset Shortcut: If you want an absolute element to stretch completely across its parent, use inset-0 (which is shorthand for top 0, right 0, bottom 0, left 0).

<!-- Try modifying the absolute positioning classes like -top-2, -right-2, or bottom-0! -->
<div class="flex items-center justify-center p-8 bg-gray-50 rounded-xl border border-gray-200">
  <div class="relative group cursor-pointer">
    <!-- The main icon/avatar -->
    <div class="w-16 h-16 bg-indigo-100 rounded-2xl flex items-center justify-center shadow-sm border border-indigo-200 group-hover:bg-indigo-200 transition">
      <svg class="w-8 h-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
    </div>
    
    <!-- The absolute notification badge anchored to the top-right -->
    <div class="absolute -top-3 -right-3 bg-rose-500 text-white rounded-full h-7 w-7 flex items-center justify-center text-xs font-bold shadow-md border-2 border-white animate-bounce">
      3
    </div>

    <!-- An absolute status dot anchored to the bottom-right -->
    <div class="absolute -bottom-1 -right-1 bg-green-500 h-4 w-4 rounded-full border-2 border-white shadow-sm"></div>
  </div>
</div>

Z-Index (Layering)#

Z-Index determines which element appears on top when they overlap. By default, later elements in the HTML appear on top. You can override this using z- classes.

• z-0
• z-10
• z-20, z-30, z-40, z-50
• z-auto

The Z-Index Trap: A highly common mistake is assigning z-50 to an element, but it still appears underneath a z-10 element. This happens because of "Stacking Contexts". If a parent element has overflow-hidden, opacity, or its own z-index, its children are trapped inside that parent's layer, regardless of how high their own z-index is set.