Position utilities (relative, absolute, fixed) in Tailwind - Mini Project: Build & Apply

Position Utilities with Tailwind CSS

📖 Scenario: You are creating a simple webpage section where a small label should appear on top of an image. The label must stay in the top-left corner of the image regardless of the page scroll.

🎯 Goal: Build a webpage section with an image and a label positioned using Tailwind CSS utilities: the image container should be relative, the label should be absolute inside it, and the label should remain fixed in the top-left corner of the viewport when scrolling.

📋 What You'll Learn

Use Tailwind CSS position utilities: relative, absolute, and fixed

Create a container with an image and a label

Position the label absolutely inside the container at the top-left corner

Add a fixed label that stays visible at the top-left corner of the viewport

Use semantic HTML and accessible attributes

💡 Why This Matters

🌍 Real World

Position utilities are used in web design to place elements exactly where you want them, like badges on images or fixed navigation bars.

💼 Career

Understanding CSS positioning and Tailwind utilities is essential for frontend developers to build responsive and interactive user interfaces.

1

Create the HTML structure with an image container

Create a div with class relative and inside it add an img tag with src="https://via.placeholder.com/300" and alt="Sample image".

Tailwind

Need a hint?

Use the Tailwind class relative on the container div to prepare for absolute positioning inside.

2

Add an absolute positioned label inside the image container

Inside the div with class relative, add a span with text "New" and classes absolute top-0 left-0 bg-blue-500 text-white px-2 py-1 text-sm.

Tailwind

Need a hint?

The label uses absolute positioning with top-0 and left-0 to appear in the top-left corner of the container.

3

Add a fixed label that stays at the viewport's top-left corner

Outside the relative container, add another span with text "Fixed Label" and classes fixed top-0 left-0 bg-red-600 text-white px-3 py-1 text-sm.

Tailwind

  
  New

Need a hint?

The fixed label uses fixed positioning so it stays visible at the top-left corner of the browser window even when scrolling.

4

Add a main container and ensure accessibility

Wrap the entire content inside a <main> tag with aria-label="Image section with labels" for accessibility.

Tailwind

  
    
    New
  
  Fixed Label
  

Need a hint?

Use the semantic main tag and add an aria-label to describe the section for screen readers.