CSS Margin Negative without Moving Parent Container

Question

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 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.

Answer 2

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

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