Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
brandonlind2
7,823 PointsI created a fixed nav and it created some problems, does anyone know why
I was experimenting with the property and value, position and fixed. I applied it to the nav instead of the header and my relative unordered list appeared on top and over lapped the fixed nav, I'm assuming this is because they are both positioned elements but does anyone know why it does this when the nav is fixed but doesnt when the header is fixed? Do positioned elements cause their parents to collapse similarly to floats and can they be fixed in a similar way with clearing, I'm asking this instead of testing it because I cant seem to be able to get clearfix to work on my floats right now. Also I noticed my sticky footer was pushed below the view port as the header became smaller and collapsed, what is pushing the sticky footer below the view port?
3 Answers
Steven Parker
243,656 PointsBoth absolute and fixed position take an element completely out of the normal document flow. And yes, fixed elements do not contribute to their parent's dimensions. Unlike floats, there is no corresponding "clear" property that relates to positioned elements. If you don't want the content scrolling over or under the fixed elements, perhaps fixed positioning is not the best choice for your design.
Your HTML tags for body and div class="main-nav" are reversed at the top, but that's not causing any visible effect at this point.
What's pushing the footer off the page is the vertical margin of the h1 element. Since it's the first thing of size in the document, the margin is collapsing to the body, pushing everything down. Just apply margin: 0 to the h1 (or some padding or border to the heading) to fix it.
Kristoffer Chrone Lund
1,471 PointsYou need to add padding-top to the top of the page. Like a wrapper tag.
Mark Pryce
8,804 PointsIt could either be collapsing margins or more likely down to your use of positioning.
Keep in mind an absolute position is placed absolutely but relative to its closest parent element with the position of relative, if no parent element is positioned relative the absolute will be placed relative to the viewport itself.
Sorry on my phone so can't mess around with the code but I do believe your issue lies here.
Happy coding :)