# Absolute

Absolute positioning takes an element out of the page's flow and places it relative to its nearest positioned ancestor, usually a parent with position relative.

Apprentice · CSS · Updated October 29, 2026

## After this lesson you can

- Place an element at a spot inside its parent with absolute positioning and a relatively positioned parent

## Key takeaways

- Absolute positioning takes an element out of the page's flow, so the elements after it move up into its space.
- It's placed relative to its nearest ancestor whose position isn't static, usually a parent you've made relative.
- With no positioned ancestor, it's placed relative to the page, and it scrolls with the page.

`absolute` position takes the element out of the page's flow (the space it would have used is no longer kept) and places it relative to its nearest ancestor that has a position other than `static`, usually a parent you've given `position: relative`. If there's no such ancestor, it's placed relative to the page.

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

![Div 2 placed 30px from the page's top left corner, over div 1, and div 3 moved up into the space div 2 left](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/09/f14f4087e4d94d16a4db232630e505fb.png "Div 2 uses position: absolute")

As the page is scrolled, all elements scroll together.

![After scrolling, div 2 has moved up with the page, still sitting over div 1](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/09/30a1c2ed50d9457a9d5125c6b29fde65.png "Div 2 scrolls with all other divs")

## Inside a relative parent

Give the parent `position: relative` and it becomes the frame the absolute element is measured from.

```css
.product-card {
    position: relative;
}

.sale-badge {
    position: absolute;
    top: 0;
    left: 0;
}
```

The sale badge now sits in the product card's top left corner, and it moves wherever the card goes.

## Check yourself

2 questions to try on the lesson page.

## So what

Sale badges on product cards, close buttons in a corner and labels over a picture are all absolute elements inside a relative parent.

## Key terms

- [Absolute positioning](https://www.ask-codey.com/glossary/absolute-positioning)

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