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`](https://developer.mozilla.org/en-US/docs/Web/CSS/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.”](http://codepen.io/anon/pen/cqJnu) Each `#relative…` div is 100px tall, plus your `
_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.
