Relative and absolute positioning


Is there a good description, with examples, of these concepts? My resume passed, but they confuse me. When I try to incorporate concepts like fixed, and margins, etc. I am very confused. Do people usually use the same order they identify elements with in css. Im wondering if I always tried to write my css in the same order, it might help me check code elements off some kind of mental list as I try to code. It seems, to me, harder to edit....


no time to answer this question, so here is answer i wrote a while back, i hope it is better, and it contains examples:

About positioning, i assume you figured out padding?

Now, we have 4 different positions:

static (which is default)

lets start with static, you can push static elements around with margin. pretty simple. It is getting interesting when use the 3 remaining positions, because besides margin, we then also have:

left, right, bottom, top

which we can use to position our elements, lets start with absolute, from the exercise:

The first type of positioning is absolute positioning. When an element is set to position: absolute, it's then positioned in relation to the first parent element it has that doesn't have position: static. If there's no such element, the element with position: absolute gets positioned relative to <html>

this explanation is true if we use left, right, bottom and top. Not when using margin, when using margin, we just push the element around. as you can see in this bin we have a static div (#outer) and a absolute div (#inner) and as you can see, #inner position relative to html, because parent (#outer) is static, if you where to change #outer to relative, #inner would position relative to #outer.

Lets quickly cover position: fixed; it works pretty much like absolute, except when you scroll it stays exactly where it is (unlike position: absolute), it is "glued" to the screen if you like. For the rest it is the same.

Now, lets cover position: relative; from the exercise:

Relative positioning is more straightforward: it tells
the element to move relative to where it would have landed if it just
had the default static positioning

which again is true if you left, top, bottom and right. Before i continue, you need to realize that left, top, bottom and right do not work on static elements. Now, look at this bin, as you can see, margin is pushing #one and #two down. however, if you where to change margin-top: 50px; to top: 50px; #one would be moved 50px relative to where it would have been, and not push down #two.

now, the final bin, as you can see, margin-bottom is pushing the red block (#two) down. if you where to remove margin-bottom: 30px; you will see that #two shifts up. If then you where to add bottom: 30px; you will see #one shifting up, so there is a big difference. margin-bottom will push the element below 30px down, where bottom: 30px will offset #one by 30px from where it was

There you go, hope this helps understanding positioning. feel free to ask if you have any questions


Thanks for your reply. No, I dont really understand. What is the difference between margin-top: 50px and top:50px?

Yes, I did understand padding.

Is positioning used for mostly divs or also for tables, etc?



look at this example, margin will simple push div down 50px, if you change margin-top to top, you will see that top offsets #one by 50px, but doesn't move #two.

You can use position on pretty much anything (paragraphs, headings, div, tables, span, a, img, and pretty much everything which you can target with a css selector)

You can also make a div behave like a table by adding display: table; to the div. There are so many possibilities.


Thanks for that illustration. I think I need to play around with positioning more. I appreciate your help!


You should play with positioning, feel free to also play around with the illustrations i provided, when you open them, they are copies, so you can play around with the illustrations as much as you like.

If you get stuck or have a question, feel free to ask