0
0
CSSmarkup~5 mins

Position relative in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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.