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.
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
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
Thank you! The bin examples helped. Static, absolute, fixed, and relative are easy to confuse.
Feel free to experiment with the examples, do ask if you have any questions. Good these examples helped you in your understanding of positioning
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.
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
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…
I found this really helpful in explaining position in more detail.
http://www.barelyfitz.com/screencast/html-training/css/positioning/
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…