Position static in CSS - Mini Project: Build & Apply

Understanding CSS Position Static

📖 Scenario: You are creating a simple webpage layout with two boxes. You want to understand how the default CSS positioning works by using position: static on one of the boxes.

🎯 Goal: Build a webpage with two colored boxes side by side. The first box uses position: static so it stays in the normal flow of the page. The second box will be positioned differently later.

📋 What You'll Learn

Create a basic HTML structure with two <div> elements inside a container.

Apply position: static to the first box using CSS.

Give each box a distinct background color and size so they are visible.

Ensure the boxes appear side by side using CSS Flexbox on the container.

💡 Why This Matters

🌍 Real World

Understanding how <code>position: static</code> works helps you control how elements appear on a webpage and how they interact with other elements.

💼 Career

Web developers often need to manage element positioning to create clean, accessible, and responsive layouts.

1

Create the HTML structure with two boxes

Write the HTML code to create a <div> with class container that contains two child <div> elements with classes box1 and box2 respectively.

CSS

Need a hint?

Use <div class="container"> as the parent, then add two <div> children with classes box1 and box2.

2

Add basic CSS and set position static on the first box

Write CSS to style .container with display: flex; so the boxes appear side by side. Then add CSS for .box1 to have position: static;, a background color of #4CAF50, width 8rem, height 8rem, and center the text inside.

CSS

.container {
  display: flex;
  /* Your code here */
}
.box1 {
  position: static;
  background-color: #4CAF50;
  width: 8rem;
  height: 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Your code here */
}

Need a hint?

Use display: flex; on .container to align boxes horizontally. Set position: static; on .box1 to keep it in normal flow.

3

Style the second box with a different background and size

Add CSS for .box2 to have a background color of #2196F3, width 8rem, height 8rem, and center the text inside using flexbox.

CSS

.container {
  display: flex;
}
.box1 {
  position: static;
  background-color: #4CAF50;
  width: 8rem;
  height: 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box2 {
  /* Your code here */
}

Need a hint?

Use the same flexbox centering technique as .box1 but with a different background color.

4

Add a border and margin to boxes for better visibility

Add CSS to both .box1 and .box2 to have a 2px solid black border and a margin of 0.5rem around each box.

CSS

.container {
  display: flex;
}
.box1 {
  position: static;
  background-color: #4CAF50;
  width: 8rem;
  height: 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Your code here */
}
.box2 {
  background-color: #2196F3;
  width: 8rem;
  height: 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Your code here */
}

Need a hint?

Add the same border and margin styles to both .box1 and .box2 for consistent spacing and visibility.