Relative / static / absolute position - no difference?


Hi Guys, I'm at number 19 in chapter 11: CSS Positioning.
I just learned about the various positions and floats. But in the example at chapter: 18 and 19 no matter which position I enter it always stays the same.

Is this a browser problem or is this a normal behaviour? Because If it won't change I don't get it. I need to actually see the difference between said positions.

Thanks guys!


the difference won't become clear, unless introduced to left, right, top and bottom.

Lets get started with position fixed, fixed positions relative to first non-static parent. If there is no non-static parent, it positions relative to document.

see this bin, see how the #inner div positions relative to document? Now see what happens when you changes #outer's position to relative


position relative

from MDN:

This keyword lays out all elements as though the element were not positioned, and then adjusts the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned)

i made another bin, see how using margin (which behaves static) not only moves #top down, but also #bottom, see what happens when you change margin-top into top


Hiho @stetim94 Thx for your explenation. It's getting clearer but I still don't get it.

The sentence from the MDN is so confusing for me.
Also I don't know what top means? I know margin-top but top allone?

I also tried your examples (nice site) and played around with it but it won't come into my mind. I think I have to practice that in real life examples. That's the first thing I won't get in the course.


top is a css property just like margin-top, and top doesn't work for static elements. This is where relative comes into play. If you used the examples like i told you, you should see some differences?

Yea, this is mostly practice.


Ok I will start some projects and I think after some times I will fully understand it.
Thanks for your help!


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