Bird
Raised Fist0
CSSmarkup~5 mins

Position relative in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Position relative lets you move an element a little bit from where it normally sits. It keeps space for the element in the page layout.

You want to nudge a button slightly to the right without breaking the page layout.
You want to place a label near an image but keep the image's space reserved.
You want to create a small animation by moving an element from its original spot.
You want to layer elements by moving one slightly over another without changing the flow.
You want to adjust text position inside a box without affecting other content.
Syntax
CSS
selector {
  position: relative;
  top: 10px;    /* moves down 10px */
  left: 5px;    /* moves right 5px */
}

The position: relative; property keeps the element in the normal page flow.

Using top, left, bottom, and right moves the element from its original spot.

Examples
This moves the div 20 pixels down and 10 pixels right from where it normally is.
CSS
div {
  position: relative;
  top: 20px;
  left: 10px;
}
This moves the paragraph 5 pixels up without moving left or right.
CSS
p {
  position: relative;
  top: -5px;
  left: 0;
}
This moves the button 15 pixels left and 10 pixels up from its normal spot.
CSS
button {
  position: relative;
  right: 15px;
  bottom: 10px;
}
Sample Program

The blue box moves down and right from its normal place, but space for it remains reserved. The second box stays where it is.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Position Relative Example</title>
  <style>
    .box {
      width: 150px;
      height: 100px;
      background-color: lightblue;
      margin: 20px;
      position: relative;
      top: 30px;
      left: 40px;
      border: 2px solid navy;
      padding: 10px;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <div class="box">This box is moved down 30px and right 40px.</div>
  <div>This box stays in normal position.</div>
</body>
</html>
OutputSuccess
Important Notes

Relative positioning moves the element visually but keeps its original space in the layout.

If you want the element to not take space where it was, use position: absolute; instead.

Use browser DevTools (right-click element > Inspect) to see how the element moves.

Summary

Position relative moves an element from its normal spot without changing page layout.

You can move elements up, down, left, or right using top, left, bottom, and right.

It is useful for small adjustments and layering elements.

Practice

(1/5)
1. What does position: relative; do to an HTML element?
easy
A. Positions the element absolutely at the top-left corner of the page.
B. Removes the element from the page flow completely.
C. Fixes the element to the viewport so it doesn't move when scrolling.
D. Moves the element relative to its normal position without affecting other elements.

Solution

  1. Step 1: Understand position relative behavior

    Position relative moves the element from where it normally is but keeps its space reserved in the layout.

  2. Step 2: Compare with other position types

    Unlike absolute or fixed, relative does not remove the element from the document flow.

  3. Final Answer:

    Moves the element relative to its normal position without affecting other elements. -> Option D

  4. Quick Check:

    Relative = moves element but keeps space [OK]
Hint: Relative moves element but keeps space in layout [OK]
Common Mistakes:
  • Thinking relative removes element from flow
  • Confusing relative with absolute or fixed
  • Assuming relative positions element at page corner
2. Which of the following is the correct CSS syntax to move an element 10px down using relative positioning?
easy
A. position: relative; bottom: 10px;
B. position: relative; top: 10px;
C. position: absolute; top: 10px;
D. position: fixed; left: 10px;

Solution

  1. Step 1: Identify correct property for moving down

    Using top: 10px; moves the element 10px down relative to its normal position.

  2. Step 2: Confirm position type

    Position must be relative to use top for relative movement.

  3. Final Answer:

    position: relative; top: 10px; -> Option B

  4. Quick Check:

    Relative + top moves element down [OK]
Hint: Use top with relative to move down [OK]
Common Mistakes:
  • Using bottom to move element down (it moves up)
  • Mixing position absolute or fixed instead of relative
  • Using left or right instead of top for vertical movement
3. Given this CSS: 
div {
  position: relative;
  left: 20px;
  top: 10px;
  background-color: lightblue;
  width: 100px;
  height: 50px;
}
What will be the visual position of the div compared to its normal spot?
medium
A. Shifted 20px right and 10px down from its normal position.
B. Shifted 20px left and 10px up from its normal position.
C. No movement; stays in normal position.
D. Shifted 20px right and 10px up from its normal position.

Solution

  1. Step 1: Understand left and top with relative

    Left: 20px moves the element 20px to the right; top: 10px moves it 10px down.

  2. Step 2: Combine movements

    Both together shift the element diagonally right and down from its original spot.

  3. Final Answer:

    Shifted 20px right and 10px down from its normal position. -> Option A

  4. Quick Check:

    Left positive = right, top positive = down [OK]
Hint: Positive left moves right; positive top moves down [OK]
Common Mistakes:
  • Thinking left:20px moves left instead of right
  • Confusing top positive as moving up
  • Ignoring combined effect of left and top
4. This CSS code is intended to move a p element 15px down, but it doesn't work as expected: 
p {
  position: relative;
  bottom: 15px;
}
What is the problem?
medium
A. bottom: 15px; moves the element up, not down.
B. The position property should be absolute to move down.
C. The value should be negative like bottom: -15px; to move down.
D. The element needs display: block; to move.

Solution

  1. Step 1: Understand bottom property with relative

    Positive bottom: 15px; moves the element up by 15px relative to its normal position.

  2. Step 2: Compare intention vs actual behavior

    Intended to move down, but positive bottom moves up instead.

  3. Final Answer:

    bottom: 15px; moves the element up, not down. -> Option A

  4. Quick Check:

    Bottom positive moves up [OK]
Hint: Positive bottom moves element up, negative moves down [OK]
Common Mistakes:
  • Confusing bottom positive as moving down
  • Thinking position must be absolute to move
  • Believing display affects position movement
5. You want to layer two boxes so the second box overlaps the first by 30px to the right and 20px down, but keep the page layout unchanged. Which CSS is best?
hard
A. First box: position: static; Second box: position: relative; right: 30px; bottom: 20px;
B. First box: position: absolute; Second box: position: absolute; left: 30px; top: 20px;
C. First box: position: relative; Second box: position: relative; left: 30px; top: 20px;
D. First box: position: relative; Second box: position: absolute; left: 30px; top: 20px;

Solution

  1. Step 1: Understand layering with relative positioning

    Using position: relative; on both keeps layout space but allows moving the second box over the first.

  2. Step 2: Apply left and top offsets to second box

    Setting left: 30px; and top: 20px; moves the second box right and down overlapping the first.

  3. Step 3: Avoid absolute to keep layout unchanged

    Absolute removes element from flow, changing layout. Relative keeps layout intact.

  4. Final Answer:

    First box: position: relative; Second box: position: relative; left: 30px; top: 20px; -> Option C

  5. Quick Check:

    Relative + offsets overlap without layout shift [OK]
Hint: Use relative + left/top to overlap without layout change [OK]
Common Mistakes:
  • Using absolute removes element from flow, breaks layout
  • Using right/bottom offsets incorrectly for desired direction
  • Not setting position relative on first box for layering context