Placing Logo on top

If you go to www.xtremetj4x4.com you will see a site I am currently working on. I am using CSS for everything. The header has a logo in it. I want that logo XtremeTJ4x4 to go on top of the image below it. It has transparency. (It is a background image) It is has a height of 80px width of 760. The div its in should only be 44px. It is the same pixels as the menu buttons on there. I have it expanded to show the logo right now. I want to reduce it back. How do I go about getting the logo over the image below. It is in the same header tag.

I could make it just the logo. I could place it on top in an absolute position. I would have to make it where it used the inside position rather than the outside of the website. I don't know the code for that. So any ideas would be useful on it.

Thanks

First, put your "XtremeTJ4x4" logo into its own box. That could be an <img>, or a <div> with a CSS background. It needs its own box so that you can manipulate it independently of the navbar <ul>. Keep this box inside your header <div>.

Now give the header <div> the CSS {position: relative;}. Then, when you use {position: absolute;} on your new box, it will be positioned relative to the header, not the whole page.

Technical explanation: absolute positioning is calculated relative to the nearest positioned ancestor, or relative to the viewport if there is no positioned ancestor. By applying {position: relative;} to the container, you establish a new positioning context.