How do I put an image on top of an image without using absolute positioning?

Basically, I have some nice navigation button .png's given to me from a friend and a header/banner.jpg. I want to put these .png's on top of the .jpg banner. The problem is that I'm using a css rollover function (for the navigation buttons) that requires me to use position: relative for the divs that contain the individual navigation buttons. Otherwise the rollover function gets hairy in Opera. How would I be able to accomplish this?

Here's some code for the css (for the navigation buttons):

.cssnavabout    { background: url(navigation/about_on_over.png) no-repeat; white-space: nowrap; display: block; height: auto; width: auto; float: left; position:absolute; top: 55%; left: 50% }
.cssnavabout a   { display: block; color: #000000; width: auto; height: auto; display: block; float: left; color: black; text-decoration: none; }
.cssnavabout img { width: auto; height: auto; display: inline; margin: 0px; border-style:none }
.cssnavabout a:hover img { visibility:hidden }

And the HTML partition (for the navigation buttons):

<div id="csswrapper">
 <div class="cssnavabout">
<a href="about.html"><img src="navigation/about_on.png" width=100 height=50 /></a&g开发者_JS百科t;
</div>

Heres the CSS for the header/banner:

#header { width: 1024px; height: 109px; position: relative; margin:0px; background-color:#FFFFFF; }

And the HTML for the banner:

<div id="header">
<img src="images/banner_about.jpg" width="100%" height="109" /> </div>

I'm sure this is easily solvable. Sorry, this is my first website.

---

How do I put an image on top of an image without using absolute positioning?

Like so...

<div style="background: url(image.png) no-repeat">
    <img src="image2.png" alt="" />
</div>

---

Seems to be a case of z-index: http://www.w3schools.com/Css/pr_pos_z-index.asp

---

But you can give absolute position to the anchor that contains the png button which should do the trick.

#csswrapper a{
   position:absolute;
   top:20px;  //edit
   right:20px; //as needed
}