Position absolute in CSS - Mini Project: Build & Apply

Position Absolute with CSS

📖 Scenario: You are creating a simple webpage layout where a small box should appear at the top-right corner inside a larger container.

🎯 Goal: Build a webpage with a container box and a smaller box positioned absolutely at the top-right corner inside the container.

📋 What You'll Learn

Use a container div with a fixed size and background color.

Create a smaller div inside the container.

Use position: relative on the container.

Use position: absolute on the smaller box.

Position the smaller box at the top-right corner of the container using CSS.

💡 Why This Matters

🌍 Real World

Positioning elements absolutely inside containers is common in web design for badges, notifications, or floating buttons.

💼 Career

Understanding CSS positioning is essential for front-end developers to create precise and responsive layouts.

1

Create the HTML structure with container and box

Write the HTML code to create a div with class container and inside it a div with class box.

CSS

Need a hint?

Use nested div elements with the exact class names container and box.

2

Add CSS for container size and relative positioning

Add CSS to set the .container to have width: 300px, height: 200px, background-color: lightgray, and position: relative.

CSS

.container {
  /* Your code here */
}

Need a hint?

Set the container's size and background color, and add position: relative so the absolute positioning inside works.

3

Add CSS for the box with absolute positioning

Add CSS to set the .box to have width: 50px, height: 50px, background-color: steelblue, position: absolute, top: 0, and right: 0.

CSS

.container {
  width: 300px;
  height: 200px;
  background-color: lightgray;
  position: relative;
}
.box {
  /* Your code here */
}


  

Need a hint?

Use position: absolute and set top and right to zero to place the box in the top-right corner.

4

Add accessibility and responsive design

Add aria-label="Container box" to the div with class container and add a media query to reduce the container width to 100% on screens smaller than 400px.

CSS

.container {
  width: 300px;
  height: 200px;
  background-color: lightgray;
  position: relative;
}
.box {
  width: 50px;
  height: 50px;
  background-color: steelblue;
  position: absolute;
  top: 0;
  right: 0;
}

/* Your media query here */


  

Need a hint?

Add the aria-label attribute for accessibility and use a media query to make the container width responsive on small screens.