CSS position Property

position: relative is a very practical value in CSS positioning properties.

Relative positioning allows an element to be offset from its original position in the normal document flow, while preserving the space it originally occupied in the document flow.

This means that after the element moves, the space it originally occupied is still reserved, and does not affect the layout of surrounding elements.

Word explanation: relative comes from the Latin word relativus, meaning "relative" or "related", indicating that the position is determined relative to a reference point.

Basic Syntax

position: relative must be used together with the top, right, bottom, and left properties to specify offsets.

/* Syntax */
position: relative;

/* Common usage: offset 20px upward, 10px to the left */
.box {
  position: relative;
  top: -20px;
  left: 10px;
}

Property Description

relative positioning requires the following offset properties:

Offset Properties

Property	Description	Positive Value Effect	Negative Value Effect
`top`	Offset from the top edge of the original position	Move downward	Move upward
`bottom`	Offset from the bottom edge of the original position	Move upward	Move downward
`left`	Offset from the left edge of the original position	Move rightward	Move leftward
`right`	Offset from the right edge of the original position	Move leftward	Move rightward

z-index Property

position: relative activates the z-index property, allowing you to control the stacking order of elements:

.box {
  position: relative;
  z-index: 10; /* Set stacking order: larger values appear on top */
}

Core Features

Feature 1: Preserve Original Space

This is the most important feature of relative. After the element is offset, its original position in the document flow is still preserved, and surrounding elements do not move to fill the gap.

Feature 2: Serve as Reference for Absolute Positioning

relative elements are often used as a positioning context, allowing absolute elements inside them to be positioned relative to it:

/* Parent element with relative as reference */
.parent {
  position: relative;
}

/* Child element with absolute positioned relative to .parent */
.child {
  position: absolute;
  top: 0;
  left: 0;
}

Feature 3: Activate z-index

z-index only takes effect when position is not static.

Examples

Let’s explore the features of position: relative through examples.

Example 1: Basic Offset Usage

This example shows how an element offsets from its original position:

Example

<!DOCTYPE html>
<html>

<head>
<style>
 .container {
   padding: 20px;
   background-color: #f5f5f5;
   border: 2px solid #ddd;
 }

.box {
  width: 120px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  margin: 10px;
  background-color: #3498db;
  border-radius: 4px;
}

/* Second box uses relative positioning offset */
.box-2 {
  position: relative;
  top: 20px; /* Move 20px down from original position */
  left: 30px;  /* Move 30px right from original position */
  background-color: #e74c3c; /* Red, more prominent */
}
</style>
</head>

<body>
<div class="container">
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2 (relative)</div>
<div class="box box-3">Box 3</div>
</div>

<p>Observe: Box 2 is offset, but its original position is still preserved (Box 3's position remains unchanged).</p>
</body>

</html>

Example 2: Negative Offset

Negative values can move the element in the opposite direction:

Example

<!DOCTYPE html>
<html>

<head>
<style>
 .container {
   padding: 30px;
   background-color: #f0f0f0;
   border: 2px solid #ccc;
 }

.box {
  width: 150px;
  height: 50px;
  background-color: #2ecc71;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  margin-bottom: 5px;
}

/* Use negative values to move upward and leftward */
.moved-up {
  position: relative;
  top: -20px;  /* Move 20px upward */
}

.moved-left {
  position: relative;
  left: -30px; /* Move 30px leftward */
}

.both {
  position: relative;
  top: -40px;
  left: 20px;
  background-color: #e74c3c;
}
</style>
</head>

<body>
<div class="container">
<div class="box">Original Position</div>
<div class="box moved-up">top: -20px (move up)</div>
<div class="box moved-left">left: -30px (move left)</div>
<div class="box both">Combined Offset</div>
</div>
</body>

</html>

Example 3: Relative as Reference Container for Absolute Positioning

The most common use of relative is to create a positioning container so that child elements with absolute positioning are positioned relative to it:

Example

<!DOCTYPE html>
<html>

<head>
<style>
 /* Parent container set to relative to create positioning context */
 .card {
   position: relative;  /* Key: reference for child element positioning */
   width: 300px;
   height: 200px;
   background-color: white;
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
   overflow: hidden;
 }

/* Image style */
.card-image {
  width: 100%;
  height: 100%;
  background-color: #3498db;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}

/* Badge uses absolute positioning, relative to .card container */
.card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #e74c3c;
  color: white;
  padding: 5px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

/* Another common use: bottom-right action button */
.card-action {
  position: absolute;
  bottom: 15px;
  right: 15px;
  background-color: #2ecc71;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}
</style>
</head>

<body>
<div class="card">
<div class="card-image">Card Image</div>
<div class="card-badge">NEW</div>
<div class="card-action">View Details</div>
</div>

<p>Because .card has position: relative, .card-badge and .card-action are positioned relative to the card edges, not the entire page.</p>
</body>

</html>

Example 4: Using z-index to Control Stacking Order

relative positioning can be combined with z-index to achieve element stacking effects:

Example

<!DOCTYPE html>
<html>

<head>
<style>
 .container {
   position: relative;
   height: 200px;
   background-color: #f5f5f5;
   border: 2px solid #ddd;
 }

.box {
  width: 120px;
  height: 80px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  border-radius: 4px;
}

/* First box */
.box-1 {
  top: 20px;
  left: 20px;
  background-color: #e74c3c;
  z-index: 1;
}

/* Second box */
.box-2 {
  top: 40px;
  left: 60px;
  background-color: #2ecc71;
  z-index: 2;
}

/* Third box */
.box-3 {
  top: 60px;
  left: 100px;
  background-color: #9b59b6;
  z-index: 3;
}
</style>
</head>

<body>
<div class="container">
<div class="box box-1">z-index: 1</div>
<div class="box box-2">z-index: 2</div>
<div class="box box-3">z-index: 3</div>
</div>

<p>The larger the z-index value, the higher the element appears. The purple box (z-index: 3) overlays the green box (z-index: 2).</p>
</body>

</html>

Notes

Performance Tip: When using position: relative for offsetting, although the element visually moves, its original position in the document flow is still preserved. This means the browser must render two positions simultaneously, which may affect rendering performance. Use it cautiously in complex pages.

Using top and bottom Simultaneously

When both top and bottom are used, top has higher priority, and bottom is ignored:

.box {
  position: relative;
  top: 20px;
  bottom: 50px; /* Ignored; element ends up at top: 20px */
}

Using left and right Simultaneously

Similarly, left has higher priority than right:

.box {
  position: relative;
  left: 30px;
  right: 50px; /* Ignored; element ends up at left: 30px */
}

Comparison with Other Position Values

Position Value	Preserves Original Space	Offset Reference	Common Use Cases
`static`	Yes (no offset)	None	Default layout
`relative`	Yes	Original position	Fine-tune position, create positioning context
`absolute`	No	Nearest positioned ancestor	Precise element placement
`fixed`	No	Viewport	Fixed navigation, back-to-top buttons
`sticky`	Yes (before threshold)	Viewport (after threshold)	Fixed on scroll

Common Use Cases

Use Case 1: Fine-tuning Alignment of Icons and Text

Sometimes icons and text are slightly misaligned; use relative for precise adjustment:

.icon {
  position: relative;
  top: 2px; /* Move down 2px for better vertical centering */
}

Use Case 2: Slight Movement on Hover

Buttons move down slightly on hover to enhance interactivity:

.button:hover {
  position: relative;
  top: 2px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

Use Case 3: Creating a Positioning Container for Modals

.modal-container {
  position: relative; /* Allow modal to be positioned relative to this container */
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Summary

position: relative is a crucial positioning method in CSS layout:

Element offsets from its original position while preserving original space
Activates z-index to control stacking order
Commonly used as a reference container for absolute positioning
top and left have higher priority than bottom and right
Commonly used for fine-tuning element positions, creating positioning contexts, and creating interactive effects

YouTip

Css Position Relative

CSS position Property

Basic Syntax

Property Description

Offset Properties

z-index Property

Core Features

Feature 1: Preserve Original Space

Feature 2: Serve as Reference for Absolute Positioning

Feature 3: Activate z-index

Examples

Example 1: Basic Offset Usage

Example

Example 2: Negative Offset

Example

Example 3: Relative as Reference Container for Absolute Positioning

Example

Example 4: Using z-index to Control Stacking Order

Example

Notes

Using top and bottom Simultaneously

Using left and right Simultaneously

Comparison with Other Position Values

Common Use Cases

Use Case 1: Fine-tuning Alignment of Icons and Text

Use Case 2: Slight Movement on Hover

Use Case 3: Creating a Positioning Container for Modals

Summary

CSS position Property

📂 Categories