IE 7 z-index problem

My slogan is a transparent png but part of it is hide by another div.

<div id="slogan-wrapper">
  <div id="slogan">
   <div>
</div>
<div id="content-wrapper">
  <!-- content -->
</div>

I apply a css background image on div slogan and set z-index to 9999
but it is hidden by content-wrapper div

http://i36.photobucket.com/albums/e28/adrianmak2/Capture-11.png

Then, after google on the web , people said that should add a position on the z-index
so I modifiied the css

#slogan {
  position:relative;
  z-index:9999;
}

But it still not work.
Then I add z-index on the content-wrapper div too

#content-wrapper {
  position:relative;
  z-index:1;
}

It is not work too until I put content-wrapper's z-index to -1 (ie negative value), the sloan full image show up
However, all the navigation menu items are not clickable.