Whats the difference? Absolute and relative

Question

it may be a kinda dumb question but does someon know the difference between absolete and relative? i have an example here:

<style>
#container {
width: 200px;
height: 200px;
background: green;
position: relative;
}
#box {
width: 50px;
height: 50px;
background: red;
position: absolute;
}
</style>
<div id="container">
<div id="box"> </div>
</div>

it would be great if someon can answer;)

Answer 1

Absolutely positioned element is rendered out of main render flow and doesn't take any space in root element (you can remove or reduce to less than 50px height property of #container to see). It is positioned by closest parent with relative position.
Relatively positioned element is mostly like usually positioned. But it affects nested absolutely positioned elements.
Both types of positioning allows you to set top, bottom, left and right properties. Their meaning is how far element is positioned from it's "parent" container edge. Relative position will set parent container as parent element in your html code. Absolute position will set parent container as closest relative element or browser window if there is no relative parent.

Answer 2

when you are waiting for a bus, you think you're absolutely stopped, but relatively to a bus driver, you are getting closer to him ;)

Answer 3

啊，表示英文水平看不太懂啊。。😔

Answer 4

thanks for the answer it helped alot;)

Answer 5

Relative: The html object will be rendered im a simple and basic way.
Absolute: The html object will be rendered as (top:0px,left:0px) and would not be affected by other html object's margin.

Answer 6

relative can be a countainer for absolute

Answer 7

I think absolute overlaps anything... If there's something written or some element there... Absolute will just sit on it.. While... Relative will move the same amount of pixels from that element where it was supposed to be..

Answer 8

the absolute difference means that even if you increase or decrease the size of window the content will get displayed in the fixed size.
the relative difference will make your content to appear in the ratio of the size of the window