Z-index

Bonjour, je lie depuis quelque temps de nombreux toturiaux sur ce site pour intégrer mon design dans un template Joomla.
Je profite de ce premier poste pour remercier toute l'équipe du site pour son travail qui m'est bien utile Le site est super beau ce qui n'est pas toujours le cas sur d'autres sites traitant du CSS (amusant non ?)

Revenons au sujet. J'ai suivie l'un des tutos de ce site qui explique le fonctionnement de la commande z-index. Ca ne fonctionne pas du tout pour moi. Voici ma structure :

<div id="header">
				<div id="logo"></div>
						<jdoc:include type="modules" name="top" />
				
						<div id="tabarea">
					<div id="tabarea_l">
						<div id="tabarea_r">
							<div id="tabmenu">
							<table cellpadding="0" cellspacing="0" class="pill">
								<tr>
									<td class="pill_l">&nbsp;</td>
									<td class="pill_m">
									<div id="pillmenu">
										<jdoc:include type="modules" name="user3" />
									</div>
									</td>
									<td class="pill_r">&nbsp;</td>
								</tr>
								</table>
							</div>
						</div>
				</div>

Et mon CSS :

div#header {
	position: relative;
	z-index: 3;
	background: url(../images/pack-a/pa-header.png) 0 0 no-repeat;
	height: 294px;
	margin-left: 53px;

}

div#logo {
	position: relative;
	z-index: 2; 
	left: 0;
	top: 0;
	float: left;
	width: 298px;
	height: 75px;
	background: url(../images/mw_joomla_logo.png) 0 0 no-repeat;
	margin-left: 30px;
	margin-top: 25px;
}

div#newsflash {
	width: auto;
	margin-left: 350px;
	margin-right: 30px;
	border: 1px solid #00f;
}

div#tabarea {
	position: relative;
	z-index: 1;
	background: #f7f7f7 url(../images/mw_header_b.png) 0 0 repeat-x;
	margin: 0 11px;

}

div#tabarea_l {
	background: url(../images/mw_header_l_b.png) 0 0 no-repeat;
	padding-left: 32px;
}

div#tabarea_r {
	height: 42px;
	background: url(../images/mw_header_r_b.png) 100% 0 no-repeat;
	padding-right: 1px;
}

J'ai fais tout un tas de test (suppression de la la div logo / z-index sur toutes les div tabarea / différentes valeur de z-index / etc) mais aucun ne fonctionne. La div tabarea reste sur la div header.

Bon après la solution radicale c'est de changer l'ordre des div dans ma page HTML mais si je rester sur une structure classique sa me rassure (au cas ou à l'ajout d'un module fasse bouder joomla avec cette structure) !

Ah j'oubliais ! la seule chose qui change quelque chose c'est quand je mes un z-index négatif. Dans ce cas je passe sous toutes les div de tout le site !

Merci par avance pour votre aide
Modifié par LiFab (24 Nov 2010 - 00:13)