Relative / static / absolute position - no difference?


#1


https://www.codecademy.com/courses/web-beginner-en-6merh/3/3?curriculum_id=50579fb998b470000202dc8b

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!



#2

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


#3

position relative

from MDN:

relative:
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


#4

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.


#5

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.


#6

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


#7

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