+ 3

Whats the difference? Absolute and relative

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;)

26th Nov 2016, 9:01 PM
SickNick - avatar
8 ответов
+ 10
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.
26th Nov 2016, 10:02 PM
Ivan G
Ivan G - avatar
+ 1
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 ;)
15th Dec 2016, 9:40 PM
Marek Kaczycki
Marek Kaczycki - avatar
+ 1
19th Dec 2016, 4:24 AM
thanks for the answer it helped alot;)
27th Nov 2016, 12:08 AM
SickNick - avatar
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.
28th Nov 2016, 12:51 PM
Foxtrot Pipe
Foxtrot Pipe - avatar
relative can be a countainer for absolute
6th Dec 2016, 12:24 PM
MATREX MOON - avatar
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..
9th Dec 2016, 6:44 AM
Jatin sharma (RedBrick Poem)
Jatin sharma (RedBrick Poem) - avatar
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
18th Dec 2016, 9:34 AM
Vijay Chawla
Vijay Chawla - avatar