z-index problem

Hi everyone,

I've absolutely positioned an element called h2#book_now, eg.

div#branding h2#book_now {
	position: absolute;
	top: 80px;
	right: 28px;
	width: 76px;
	height: 76px;
	z-index: 100;
}

Code (markup):

Directly after this are two more elements which are in the normal flow:

div#nav_main {
width: 812px;
height: 37px;
background-color: #be1e2d;
padding-left: 10px;
margin: 0 auto;
position: relative;
z-index: 1;
}

Code (markup):

and

div#bannerGraphic {
	position: relative;
	width: 822px;
	height: 332px;
	margin: 0 auto;
	z-index: 1;
}

Code (markup):

Because h2#book_now needs to be in front of the above two elements, I gave it a high z-index of 100 and then I relatively positioned the two above elements and gave them a z-index of 1 so they were right at the back.

Problem is that h2#book_now isn't coming to the front. I wondered if anyone knows what's going?

The full css is below.

Appreciate any advice.

body {
  background-color: #fff;
  color: #333;
  font: 12px/1.3 Arial, Helvetica, sans-serif; 
  text-align: center;
}

#outerWrapper {
  background-color: #fff;
  margin: 0 auto;
  text-align: left;
  width: 858px;
  border: 1px solid #CCC;
  overflow: hidden;
}



/*---------------------Branding---------------------*/

div#branding {
	position: relative;
	width: 822px;
	height: 101px;
	margin: 0 auto;
	overflow: hidden;
	z-index: 100;
}

div#branding h1 {
	width: 177px;
	height: 73px;
	margin-top: 15px;
	background: url(../images/logo.gif) no-repeat top left;
}

div#branding h1 a {
	display: block;
	width: 177px;
	height: 73px;
	text-indent: -9999px;
	outline: none;
}

div#branding div#enquiries {
	font-size: 13px;
	position: absolute;
	top: 30px;
	right: 0;
	width: 178px;
	height: 28px;
	color: #3e6233;
	text-align: right;
	z-index: 2;
}

div#branding div#enquiries h2 {
	font-size: 14px;
}

div#branding h2#book_now {
	position: absolute;
	top: 80px;
	right: 28px;
	width: 76px;
	height: 76px;
	z-index: 100;
}

div#branding h2#book_now a {
	background: url(../images/book_now_btn.png) no-repeat top left;
	display: block;
	width: 76px;
	height: 76px;
	text-indent: -9999px;
	outline: none;
}


div#bannerGraphic {
	position: relative;
	width: 822px;
	height: 332px;
	margin: 0 auto;
	z-index: 1;
}

div#bannerGraphic h3#banner_home {
	position: relative;
	width: 822px;
	height: 332px;
	text-indent: -9999px;
	background: url(../images/banner_home.jpg) no-repeat top left;

}



/*---------------------Main Navigation---------------------*/

div#nav_main {
width: 812px;
height: 37px;
background-color: #be1e2d;
padding-left: 10px;
margin: 0 auto;
position: relative;
z-index: 1;
}

div#nav_main h3 {
position: absolute;
top: -9999px;
}

div#nav_main ul {
height: 37px;
line-height: 37px;
}


div#nav_main li {
display: inline;
width: auto;
height: 37px;
margin-right: 0.75em;
padding-right: 1em;
border-right: 1px solid #fff;
font-weight: bold;
text-align: center;
}


div#nav_main a {
line-height: 20px;
font-weight: bold;
color: #fff;
text-decoration: none;
}

div#nav_main li#last {
border-right: 0;
}

Code (markup):