The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS confused about ‘relative’ and ‘absolute’ position ! Re: confused about ‘relative’ and ‘absolute’ position !


**1**. As @Senff mentioned above, `relative` positions an element with reference to its “natural” (i.e., where it would appear _without_ any styling) position, whereas `absolute` positions it with reference to the [closest non-statically positioned] parent element.

Because your `` element has padding, `#relative1` would normally be 20px from the top edge of the body – plus `top:30px` makes 50px. `#absolute1` ignores where it would “normally be,” and so is exactly 30px from the top of the body.

**2.** I don’t understand what you mean by “scale” in this context.

**3.** Same question.

**4.** If by “**float** in body” you mean “**completely contained inside** the body,” then you’ll simply need to pay attention to how big your elements are and how much space they have available.

_([`float`]( means something else entirely.)_

In this instance, your body is 260px* tall. Your `#absolute2` is 100px tall, which leaves you with 160px before it overlaps the bottom of the body. Because you positioned it with `top: 180px`, it overlaps the bottom border by 20px.

* _observe: when you remove the positioning, [you can see where your relative elements would appear “normally.”]( Each `#relative…` div is 100px tall, plus your `` element works out to be 20px tall. Your `` has 20px top and bottom for padding._

_100 + 100 + 20 + 20 + 20 = 260._

**5.** There are other differences, but I think these answers clearly demonstrate that `absolute` cannot “do everything `relative` does,” and vice-versa.