CSSmarkup~30 mins

Position relative in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Positioning an Element with CSS Relative Position

📖 Scenario: You are creating a simple webpage with a box that you want to move slightly from its normal place without affecting other elements.

🎯 Goal: Build a webpage with a blue square box that is shifted 20 pixels down and 30 pixels to the right using CSS position: relative.

📋 What You'll Learn

Create an HTML structure with a container and a box inside it

Add CSS to style the box with a fixed size and background color

Use position: relative on the box

Move the box 20 pixels down and 30 pixels right using top and left properties

💡 Why This Matters

🌍 Real World

Relative positioning is useful when you want to nudge elements slightly without breaking the layout around them, like moving a button or label a bit for better alignment.

💼 Career

Understanding CSS positioning is essential for front-end web development jobs, as it helps create visually appealing and well-structured webpages.

Progress0 / 4 steps

Create the HTML structure with a container and a box

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

CSS

Need a hint?

Use <div class="container"> and inside it <div class="box">.

Add CSS to style the box with size and background color

Add a <style> block inside the <head> and write CSS to make the .box 100px wide, 100px tall, and with a blue background color.

CSS




  
  
  Relative Position Example
  
    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
      /* Your code here */
    }

Need a hint?

Inside <style>, add CSS for .box with width, height, and background-color.

Add position: relative to the box

In the CSS for .box, add the line position: relative; to enable relative positioning.

CSS




  
  
  Relative Position Example
  
    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
      position: relative;
      /* Your code here */
    }

Need a hint?

Add position: relative; inside the .box CSS block.

Move the box 20px down and 30px right using top and left

In the CSS for .box, add top: 20px; and left: 30px; to shift the box down by 20 pixels and right by 30 pixels.

CSS




  
  
  Relative Position Example
  
    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
      position: relative;
      top: 20px;
      left: 30px;
      /* Your code here */
    }

Need a hint?

Add top: 20px; and left: 30px; inside the .box CSS block to move it.