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

CSS

James Welch
James Welch
10,363 Points
Posted by James Welch
James Welch
10,363 Points

Relative positioning confusion

Today I was playing around, creating some mock up pages just to practice with. I was using a navigation bar which when reached the top of the page, became fixed. I had an issue where the content below the nav would jump up due to the nav losing it's height. I decided a negative margin to start with would sort of simulate the nav having no height. This worked however the background colour of the nav element was pushed up to start with, the margin literally pushed up the nav element (The ul~ elements were still in their normal position. What fixed this is when I gave my nav a position of relative. The margin-bottom was there and basically just collapsed the nav bar without it actually moving. Could anyone clear up the reason behind this? Why does (relative) positioning change the way an element would normally behave? Sorry if I'm confusing haha. Happy coding everyone!

2 Answers

Jesus Mendoza
Jesus Mendoza
23,288 Points
Jesus Mendoza
Jesus Mendoza
23,288 Points

Try using position absolute!

Relative position means that your nav it's part of the parent container, so if you use fixed position it is no longer part of that container, that's why your content jumps, with absolute position, you can still fake the nav to be part of the container using relative positon on the parent and absolute position on the children element, so it will no be longer part of that container but it will still stay on that position (top of the page), so when you scroll past 250 it will still become fixed but your content stays in the same position because the nav was not part of the container.

James Welch
James Welch
10,363 Points
James Welch
James Welch
10,363 Points

Worked + I understand why this happens! Thanks a lot for your reply :-)

If anyone looks at the codepen I linked above, I set the code back to the default (With relative positioning). Basically Joe and Jesus have provided some great information and an alternative, but why does setting the position to relative make it behave the way it does? If you take away the relative positioning, you see the nav element hide up behind the header because of the bottom margin forcing it up. What causes it to stay there but also have that negative margin once it's set to relative? (Just in case I bump into a similar problem in the future, or for others with a similar issue)

Jesus Mendoza
Jesus Mendoza
23,288 Points
Jesus Mendoza
Jesus Mendoza
23,288 Points

To understand why does it happens you have to understand the 3 position properties;

  1. Relative: this is the default property of most of the html elements, it is basically telling the browser that there is a container and if you add another container it should respect it's space. Teachers always say that elements with relative position go with the flow of the page. (That's why when you add a div and then add another element, it goes to the next line, because it knows that there is an element).
  2. Absolute: This position tells the browser that this element will stay here no matter what, even if you add another element right next to it, below, above, etc. That's why when you give an element the absolute position you also have to specify the top, right, bottom and left properties. It does not go with the flow of the page. (Absolute position is relative to it's parent position, this mean that the parent element must have position relatived defined).
  3. Fixed: It's basically the same as absolute position, but the position is relative to the browser's window.
Jesus Mendoza
Jesus Mendoza
23,288 Points
Jesus Mendoza
Jesus Mendoza
23,288 Points

Btw I forked your pen, edited it and added a few comments explaining what I did. In case you want to check it out.

Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

Hi James,

can I see your code so I can explain what's happening?

But in a nutshell, if you given an element a position of relative and then give it top, bottom, right or left properties it will move relative to where that element would normally be placed.

But position relative is probably most used to position other elements.

For e.g.

say you have a div with a class of container and give it position relative like this:

.container {
position: relative;
}

and then inside that .container div you have another div with the class of .container-child and give it position absolute and lets say a width of 300px like this:

.container-child {
position: absolute;
width: 300px;
}

Now my .container-child div has position: absolute it will move anywhere I want inside my .container div.

So if I do this:

.container-child {
position: absolute;
width: 300px;
left: 0;
}

It will fix itself to the left side of my .container div and not move no matter the screen size.

That might be a bit confusing to understand reading it.

Hope that helps.

Joe

James Welch
James Welch
10,363 Points
James Welch
James Welch
10,363 Points

Hey Joe, thanks for the fast reply :-) The description you've given is quite helpful, I've always been a bit dodgy when it comes to positioning. 

header,
.nav-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

nav,
main {
    position: relative;
}

nav {
    height: 80px;
    margin-bottom: -80px;
    padding-top: 15px;
    box-shadow: 0 2px 3px rgba(0,0,0, .5);
    z-index: 500;
}

These are the parts that add up. .nav-fixed is a class that is added once the nav bar is at the top of the page. Notice the nav and main being positioned relative, and the bottom margin for the nav. Here is the link to what it is like on codepen: http://codepen.io/Xenalak/pen/qOvEMo . Your answer has cleared some things up, but the main issue is that once the nav bar reaches the top and becomes fixed, it loses it's height and so the content underneath jumps up. The margin bottom compensates for the loss of the height, but it only works if it positioned relative. If you take off the position of relative on codepen you see that the nav sort up hides under the header.

Thanks a lot by the way ^^