Trouble with style sheets

I have a couple of issues regarding style.css which I'm sure are connected:

I have a graphic which I'm trying to partially overlay a banner masthead on my page. The banner is defined in the style.css as follows:

.redbanner {
	width: 100%;
	height: 172px;
	left: 0px;
	top: 59px;
	position: absolute;
	background: #990000;
	border-right-width: 10px;
	border-left-width: 10px;
	border-right-color: #660000;
	border-left-color: #660000;
}

The graphic and banner are called up in my page.tpl.php as follows:

	<div id="page" class="clear-block">
		<!-- Top Banner -->
		<div class="redbanner">
			Some Stuff
		</div>
	</div>
	<div class="logo" style="left: 12px; top: 0px; z-index: 100;">
		<a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>" rel="home">
			<img src="<?php print $bogginpath; ?>/images/logo.png" alt="<?php print t('Home'); ?>"/>
		</a>
	</div>

However I place the graphic, whether it's before or after the banner, it is always obscured by the banner. And adjusting the z-index also makes no difference.

I also have another issue with my style.css, which I think might be related - my style.css has the following definitions:

.headmenus a {
	background-repeat: repeat-x;
	background-position: left top;
	display: block;
	overflow: hidden;
	padding-right: 10px;
	padding-left: 10px;
	text-decoration: none;
	font-size: 0.8em;
	height: 22px;
	color: white;
	vertical-align: middle;
}
.headmenus a:hover {
	background-position: 0 -21px;
}

The links are called from page.tpl.php as follows.

$bogginpath /images/menu_b.gif)">link-title

The problem is that my rollovers no longer work (they work fine in plain HTML files). Also the padding-left and padding-right values don't work.