# Relative

Relative positioning moves an element away from its own normal place, and keeps the space it would have used.

Apprentice · CSS · Updated October 29, 2026

## After this lesson you can

- Shift an element from its normal place with relative positioning and top or left, keeping its space in the page

## Key takeaways

- Relative positioning moves an element away from the place it would normally be.
- A top of 30px moves it 30px down from its normal place, and a left of 30px moves it 30px right.
- The space it would have taken is kept, so nothing else moves, and it scrolls with the page.

`relative` position moves an element away from where it would normally be. `top: 30px; left: 30px;` shifts it 30px down and 30px right of its own normal place. The space it would have taken is still kept, so nothing else moves.

```css
.div-2 {
    position: relative;
    left: 30px;
    top: 30px;
}
```

![Div 2 shifted 30px down and 30px right of its normal place, overlapping div 3, which hasn't moved](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/09/76e3f4332da2412cad75e989347694be.png "Div 2 uses position: relative")

As the page is scrolled, all elements scroll together.

![After scrolling, div 2 has moved up with the other divs, still shifted from its normal place](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/09/1fba8749ef1c4203826b332ef201d202.png "Div 2 scrolls with all other divs")

## Check yourself

2 questions to try on the lesson page.

## So what

Relative is the gentle nudge: it moves one element a little without disturbing anything around it, and the next lesson uses it to mark a parent for absolute positioning.

## Key terms

- [Relative positioning](https://www.ask-codey.com/glossary/relative-positioning)

Source: https://www.ask-codey.com/lessons/css-position-relative