CSS Margin Negative without Moving Parent Container

Question

Hi All, I am trying to get on this page (http://musicaladvocacy.org/) the area where it says "Home" (The White Container in the grey gradient) to go ~60 px up, but as you can see it does that as well as moves the parent container up. I just want the white box to move up NOT the whole thing. So it should look like this: http://musicaladvocacy.org/index-margin.jpg

Thanks for any ideas!

Answer 1

You can apply position:relative; top:-60px; on the element you need to shift up.

#el {
   position:relative;
   top:-60px;
   z-index: 5;
}

Answer 2

What you are searching for is the css properties "position" and "top".

#div-1 {
  position:relative;
  top:-60px;
}

See step 2 on this guide. Many other websites have more information about this properties too.

Answer 3

You could also add 1px padding to the top of the parent, and continue using negative margins.

.width { padding-top: 1px; }
.content { margin-top: -60px; }

This works because margins that are immediately up against one another combine into a single margin.