+ 1

Difference between position absolute and relative in CSS ?

24th Aug 2017, 7:37 PM
Vamshi Krishna Patel
Vamshi Krishna Patel - avatar
13 odpowiedzi
+ 14
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
24th Aug 2017, 7:49 PM
Maz
Maz - avatar
+ 11
@Melih, isn't this what i wrote? ... *confused* ._. [ Edit ] ...not confused anymore, the discussion is about margins of the parent element, maybe. :]
24th Aug 2017, 10:36 PM
Maz
Maz - avatar
+ 5
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
24th Aug 2017, 10:00 PM
Melih Melik Sonmez
Melih Melik Sonmez - avatar
+ 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
24th Aug 2017, 9:02 PM
Melih Melik Sonmez
Melih Melik Sonmez - avatar
+ 4
@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
24th Aug 2017, 9:55 PM
visph
visph - avatar
+ 4
@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...
24th Aug 2017, 10:05 PM
visph
visph - avatar
+ 2
@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
24th Aug 2017, 10:34 PM
Melih Melik Sonmez
Melih Melik Sonmez - avatar
+ 2
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 :)))
24th Aug 2017, 10:47 PM
Melih Melik Sonmez
Melih Melik Sonmez - avatar
+ 1
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.
25th Aug 2017, 12:34 AM
visph
visph - avatar
+ 1
@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 😀
25th Aug 2017, 4:13 AM
Melih Melik Sonmez
Melih Melik Sonmez - avatar
0
difference is where's X and Y position beginning
24th Aug 2017, 7:46 PM
Yaroslav Pieskov
Yaroslav Pieskov - avatar
0
Could you please say with an example ?
24th Aug 2017, 7:48 PM
Vamshi Krishna Patel
Vamshi Krishna Patel - avatar
0
Got it , Thanks !
24th Aug 2017, 7:54 PM
Vamshi Krishna Patel
Vamshi Krishna Patel - avatar