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

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 */
}

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 */
}

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 */
}

Hint

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

Practice

1. What does position: static; do to an HTML element?

easy

A. It fixes the element to the viewport so it stays visible on scroll.

B. It removes the element from the page flow completely.

C. It allows the element to be moved using top and left properties.

D. It places the element in the normal page flow without any offset.

Solution

1. Step 1: Understand default positioning

   By default, HTML elements have position: static; which means they follow the normal flow of the page.

2. Step 2: Check offset properties effect

   With position: static;, properties like top, left do not affect the element's position.

3. Final Answer:

   It places the element in the normal page flow without any offset. -> Option D

4. Quick Check:

   Default position = static = normal flow [OK]

Hint: Static means no movement, normal flow only [OK]

Common Mistakes:

• Thinking static allows moving with top or left
• Confusing static with fixed or absolute
• Assuming static removes element from flow

2. Which of the following CSS snippets correctly applies static positioning to a div?

easy

A. div { position: relative; }

B. div { position: fixed; }

C. div { position: static; }

D. div { position: absolute; }

Solution

1. Step 1: Identify the correct property value

   The CSS property position accepts values like static, fixed, relative, and absolute. To apply static positioning, use position: static;.

2. Step 2: Match the option with static

   Only div { position: static; } uses position: static; correctly.

3. Final Answer:

   div { position: static; } -> Option C

4. Quick Check:

   Correct syntax for static = position: static [OK]

Hint: Static is the keyword 'static' in position property [OK]

Common Mistakes:

• Using fixed or absolute instead of static
• Missing the colon after position
• Using invalid property names

3. Given this HTML and CSS, what will be the vertical position of the <div> with position: static;?

<style>
div { position: static; top: 50px; }
</style>
<div>Hello</div>

medium

A. The div will be moved down 50px from its normal position.

B. The div will stay in its normal position ignoring the top value.

C. The div will be hidden because top is invalid with static.

D. The div will move up 50px from its normal position.

Solution

1. Step 1: Understand static position behavior with offsets

   When an element has position: static;, offset properties like top do not affect its position.

2. Step 2: Predict the visual result

   The div remains in the normal flow and ignores top: 50px;.

3. Final Answer:

   The div will stay in its normal position ignoring the top value. -> Option B

4. Quick Check:

   Static ignores top/left offsets [OK]

Hint: Static ignores top/left, no movement [OK]

Common Mistakes:

• Assuming top moves static elements
• Thinking static hides elements with invalid offsets
• Confusing static with relative positioning

4. You want to move a p element 20px down using CSS, but it has position: static;. What is the problem and how to fix it?

p { position: static; top: 20px; }

medium

A. Static ignores top; change position to relative to move it.

B. Static allows top; the code works fine as is.

C. Static requires bottom instead of top to move elements.

D. Static elements cannot be moved; use margin instead.

Solution

1. Step 1: Identify why top has no effect

   Elements with position: static; ignore offset properties like top, so top: 20px; does nothing.

2. Step 2: Choose correct positioning to allow movement

   Changing position to relative enables top to move the element 20px down.

3. Final Answer:

   Static ignores top; change position to relative to move it. -> Option A

4. Quick Check:

   Static ignores offsets; relative allows top/left [OK]

Hint: Use relative, not static, to move with top/left [OK]

Common Mistakes:

• Thinking static allows top to move elements
• Using bottom instead of top with static
• Trying to move static elements without changing position

5. You have a layout where a header and section stack naturally. You want the section to stay in normal flow but also move 10px right using the left: 10px; property. Which CSS is best?

header { position: static; }
section { position: static; left: 10px; }

hard

A. Change section to position: relative; and keep left: 10px;.

B. Keep section as static; left will move it 10px right.

C. Use position: absolute; on section with left 10px.

D. Use margin-left: 10px; on section and keep static position.

Solution

1. Step 1: Understand static position and left property

   With position: static;, the left property is ignored, so left: 10px; won't move the section.

2. Step 2: Choose correct position to move element while keeping flow

   Using position: relative; allows the element to move with left: 10px; but still stay in the normal document flow.

3. Final Answer:

   Change section to position: relative; and keep left: 10px;. -> Option A

4. Quick Check:

   Relative + left moves element, static ignores left [OK]

Hint: Use relative to move with left, keep flow [OK]

Common Mistakes:

• Expecting left to move static elements
• Using absolute removes element from flow
• Using margin-left instead of position for offset