Margin should be 10px, not -10px


#1

The CSS positioning lesson tells you to give the navbar a top margin of -10, but that causes the navbar to go too far up and off screen a bit. 10px would be more correct.

Also, I don't think this lesson does a good job of differentiating between the different types of positioning.


"19. Relative Positioning" - I think this needs to be updated
#2

I absolutely agree, margin-top: -10px; doesn't do much good, and the explanation of positioning is indeed lacking, i would love to point to post, but they are all on the old forum, i will explain positioning shortly, give me a moment


Relative, absolute, and fixed positioning
Changing bottom margin doesn't move div
11.Filling Out The Cases
#3

About positioning, i assume you figured out padding?

Now, we have 4 different positions:

static (which is default)
relative
absolute
fixed

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


Positioing:absolute and positioning:static do not change anything
Positioning seems to not be working as described?
CSS Positioning
Why Doesn't "Menu" move with the Body?
Interpreting values in margin parameter
Still Don't Know How to Position Elements on a Webpage
Relative &
Positions:static and absolute with "inner" and "outer" divs
CSS lessons margin bug
Positioning: Difference between absolute and relative?
Difference between padding and position:relative values
Need help with divs HELP!
Class assignment: forms
I can't realize the difference!
Linking css files to html
Positioning
CSS Positioning
Build a resume: overlapping header
When positioning html elements by inputing margin values, so does the object always moves relative to walls?
Trouble with <div> placement after adjusting margins
Menu body moves to the left
#4

Thank you! The bin examples helped. Static, absolute, fixed, and relative are easy to confuse.


#5

Feel free to experiment with the examples, do ask if you have any questions. Good these examples helped you in your understanding of positioning


#6

I just wanna say that the bins that you used really helped. Codecademy should add the bottom and right attributes to show this better. Without that, it doesn't look like anything changes.


#7

Good to hear. The codecademy focus is mostly on new course, not adding new content to old courses

I will see if something can be done


#8

changing the position in #navbar to "position:relative;" fixes the menu, in 22 you're told to set it on fixed so that's the REAL problem, i got it on trial and error because in the positioning section (17-19), the code doesn't show how it works, theres no difference in using absolute,relative or static...


#9

I found this really helpful in explaining position in more detail.

http://www.barelyfitz.com/screencast/html-training/css/positioning/


#10

This needs to be addressed, it's been this way forever now, and it's clearly wrong.

It's very confusing to students when something like this comes up - directions are followed, the code passes the "submission" phase, and yet what is shown to us is clearly wrong. Nobody wants a navbar halfway-hidden in the top of the browser.

New courses in development or not, someone should come back and fix this ASAP - how can we be expected and incentivized towards Pro membership when the Codecademy team isn't willing to correct old issues like this? And while this is probably the worst of the issues, there are other issues in the course that could be cleaned up with a once-over from an intern or something.

Keeping old courses relevant and worth participating in seems like a pretty important thing for a site like this...