Difference between position absolute and relative in CSS ?

Answer 1

Absolute is relative to his parent (with a position different from static).

Relative is relative to itself.

1. The box increase his left position by 15px

#main_box
position: relative
#box
position: relative
left: 15px

2. The box moves itself 15px by the edge of the parent element

#main_box
position: relative
#box
position: absolute
left: 15px

Answer 2

@Melih, isn't this what i wrote?

... *confused* ._.

[ Edit ]

...not confused anymore, the discussion is about margins of the parent element, maybe. :]

Answer 3

visph i told i agree with maz with one dif ; will you please go and check my code and remove margin-top definition from both and share your opinion again

at the end we are saying same but i am trying to explain in a very simple way; and if i am wrong i can fix it

Answer 4

ok absolute and relative is about relations of elements in html

i agree with maz but i need to add/fix something there

relative is pushing the objects/elements around it
absolute is taking your object to another layer so you can move to anywhere without disturbing elements around it

please check the example i write for you

https://code.sololearn.com/W10zsv05VxJn/?ref=app

ps. using layer-z is akways good practice

Answer 5

@Melih Melik Sonmez wrote: << relative is pushing the objects/elements around it >>

Not at all: your confusion come from your missuse of positioned element through the 'margin' properties instead the 'left', 'top', 'right' and/or 'bottom' ones...

'relative' positionement let you define the position/size with these four properties (if you set both properties on a same side, you define this side size implicitly), as well as the 'absolute' value. The keys differences are that 'relative' define coordinates relative to itself, against 'absolute' are relative to its first positionned parent (as said with other words by @Maz) AND 'relative' keep the initial space taken by the element on the page, while 'absolute' doesn't: same kind of difference than between 'visibility:none' and 'display:none' ^^

So, by using margins to define the position of your 'relative' element, you imply more space to be reserved around it :P

Answer 6

@Melih: will you please go and check your code and replace margin-top definition from both by 'top:50px;' for experiements what I previously wrote and maybe read it again more closely...

Answer 7

@visph
A relatively positioned element is an element whose computed positionvalue is relative. The top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the horizontal offset.
An absolutely positioned element is an element whose computed position value is absolute or fixed.The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor to which the element is relatively positioned.) If the element has margins, they are added to the offset

so in my words or lets say for BEGINNERS to understand this i tried to explain easy words

i do not understand why are you so willing to explain in very detailed way.

explainations like yours everywhere google does that for us

we should be simple here to let learners cover it easly

Answer 8

i told that i agree with you ; i just made an example code and add another simple explanation about behaviour but @visph seems didnt like my way of explanation :)))

Answer 9

It's not because << I didn't like [your] way >> but because you wrote wrong explanation ^^

... and I've never said that margin aren't added to the offset of an absolute positioned element, but that wasn't the right way for moving positioned elements, which aren't <<pushing the objects/elements around it >> as you wrote, if you use related well suited properties ('left', 'top', 'right' and/or 'bottom'), even with 'relative' positioned ones, at least if you doesn't set it some margin, obviously.

End of story.

Answer 10

@visph if i am wrong i am sorry but i am still missing the point please do enlight me ; i am serious.... explain me like i am kid and i have lack of english cause so far the only thing i understand that i am wrong 😀

Answer 11

difference is where's X and Y position beginning

Answer 12

Could you please say with an example ?

Answer 13

Got it , Thanks !