problem z pozycją elementów z-index Opcje

[PcPablo]

Sprawa się ma następująco:

HTML:

[HTML] pobierz, plaintext 
<div class="tlo_gradient"></div>
<div class="tlo_kwiaty"></div>
<div class="pasek"></div>
	<div id="wysrodkowanie">
		<div class="odstep_gora"></div>
		<div id="tlo_biale">
			<div class="logo"><a href="index.php"><img alt="logo vivesa" src="templates/default/img/logo-vivesa.png" width="230" height="230" /></a></div>
			<div id="menu_glowne">$menuGlowne</div>	
                        <h1>$aData[sName]</h1>
                        <h4>$aData[sPagesTree]</h4>
                 </div>
	</div>   
 
[HTML] pobierz, plaintext 

CSS:

[HTML] pobierz, plaintext 
.pasek {
	position: relative;
	top: 404px;
	width: 100%;
	height: 40px;
	z-index: 15;
	background: url('img/tlo-pasek.png') repeat;
}
 
h1 {
	z-index: 30;
	float: left;
	margin: 0 0 0 20px;
	padding: 12px 0;
	height: 18px;
	font-size: 22px;
	font-weight: normal;
	color: white;
	width: 900px
}
 
h4 {
	z-index: 30;
	float: right;
	margin: 12px 0 0 -500px;
	padding: 0;
	font-weight: normal;
	color: white;
}
 
[HTML] pobierz, plaintext 

Według pozycjonowania z-index elementy h1 i h4 powinny znajdować się nad elementem .pasek . Niestety tak nie jest i oba są schowane pod. Dlaczego tak jest i jak mam wyciągnąć elementy h1 i h4 na wierzch. Dodam nie mogę ich umieścić w elemencie .pasek

Pozdrawiam