Help with what relative and absolute positioning exactly means


#1

Hello, I can't add code because my problem is purely conceptual. I don't understand exactly how relative and absolute positioning work and when to use which. I have tried reading the other answers to this question on various forums but the responses are all to complicated for me an almost complete newb to understand. Specifically my main concern is when they say that when you move with relative positioning you move it from where it would have been naturally in the "flow". How do you know exactly where that is supposed to be? And when they say that when you do move it via relative it still takes up the space it was at originally to the browser it just looks like it moved to viewer, just huh? I know this must seem silly to experienced programmers but I just don't get it and I am not comfortable moving on until I do. Cheers, Biblio


#2

Hey :smiley:

Firstly, read Css Tricks 's guide on Position to gain a better understanding of Relative and Absolute..

tl:dr :
(correct me if I'm wrong experienced programmers)
Relative will behave similar to static/display:block in the sense that without any CSS it would display piece by piece (one under each other) similar to when a page loads incorrectly without any CSS. The main difference is by assigning Relative you can use left/right etc.. to move the item within the 'viewer' so whilst it still retains it spacing within the flow it displays differently..

The Flow is the word they're giving to the DOM/html document.. so you could use Relative positioning to move an item from the top of your document to the bottom within the viewport but it would still remain written [in html] near the beginning.

Absolute is similar to Relative in that it allows you to move the div away from it's default display but it's now placed outside of the flow and thus isn't affected nor effects other divs around it..

Hope that clears that up for you :smiley:


#3

Yes, yes that does clear it up... Thank you so much it has been driving me mad and I have been going round and round in circles. Cheers, Biblio


#4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.