title: How do I put an image on top of an image without using absolute positioning?
body: <p>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 <em>requires</em> 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?</p>
  
  <p>Here's some code for the css (for the navigation buttons):</p>
  
  <pre><code>.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 }
  </code></pre>
  
  <p>And the HTML partition (for the navigation buttons):</p>
  
  <pre><code>&lt;div id="csswrapper"&gt;
   &lt;div class="cssnavabout"&gt;
  &lt;a href="about.html"&gt;&lt;img src="navigation/about_on.png" width=100 height=50 /&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Heres the CSS for the header/banner:</p>
  
  <pre><code>#header { width: 1024px; height: 109px; position: relative; margin:0px; background-color:#FFFFFF; }
  </code></pre>
  
  <p>And the HTML for the banner:</p>
  
  <pre><code>&lt;div id="header"&gt;
  &lt;img src="images/banner_about.jpg" width="100%" height="109" /&gt; &lt;/div&gt;
  </code></pre>
  
  <p>I'm sure this is easily solvable. Sorry, this is my first website.</p>