[Résolu]Problème de superposition

Bonjour,

J'ai un petit soucis sur un site (www.homeexchangeguru.com), voila le tooltip réalisé en css du bouton administration (en haut à droite) passe désespérement sous la barre verte (edit : je viens de m'apercevoir que c'est sous le fond qu'il passe en fait et non pas juste la barre de menu). Pourtant les z-index sont je pense correctement fixés. 4 pour les deux boutons de log, 3 pour le bouton d'administration, 5 pour tout ce qui est tooltip et enfin 0 pour la barre verte et le fond.

J'ai pourtant réussi sans soucis aucun sur mes feuilles de style IE6 (si vous l'avez sous la main vous pouvez tester).

Voici quelques bouts de code du css et xhtml :

#sectionbar{
	position:relative;
	left:0px;
	top:0px;
	height:35px;
	min-width:815px;
	width:100%;
	margin:0;
	padding:0;
	background:url('../pictures/menubar.jpg') left top repeat-x;
	z-index:0;
}

a.tooltip em {
    display:none;
}
a.tooltip:hover {
    border: 0;
    position: relative;
    z-index: 5;
    text-decoration:none;
}
a.tooltip:hover em {
    font-style: normal;
    display: block;
    position: absolute;
    top: 20px;
    left: 0px;
    padding: 5px;
    color: #000;
    border: 1px solid #bbb;
    background: #ffc;
    width:70px;
	z-index:5;
}
a.tooltip:hover em span {
    position: absolute;
    top: -7px;
    left: 5px;
    height: 7px;
    width: 11px;
    background: transparent url('../pictures/tooltip.gif');
    margin:0;
    padding: 0;
    border: 0;
	z-index:5;
}

#log{
	position:fixed;
	top:32px;
	right:0px;
	height:21px;
	z-index:3;
}

#log a,#administration_link a{
	display:block;
	float:left;
	width:120px;
	height:21px;
	font-size:12px;
	text-align:center;
	line-height:20px;
	text-decoration:none;
	font-weight:bold;
	background:url('../pictures/button_log.gif') top left no-repeat;
	color:black;
}

#log a:hover,#administration_link a:hover{
	background-position:bottom left;
}
#administration_link{
	position:fixed;
	top:55px;
	right:60px;
	height:20px;
	z-index:2;
}

#fond{
	position:absolute;
	left:0px;
	top:150px;
	width:100%;
	z-index:0;
	opacity:0.4;
}

#container{
	position:fixed;
	display:block;
	top:0;
	right:0;
	left:200px;
	margin:0 0 0 0;
	padding:0 0 0 0;
	max-width:100%;
	min-height:100%;
	max-height:100%;
	z-index:0;
}

<div id="container">

		<div id="top">
		<div id="lang">
			<a href="index.php?page=welcome&amp;lg=fr" class="french"></a>
			<a href="index.php?page=welcome&amp;lg=en-us" class="american"></a>
			<a href="index.php?page=welcome&amp;lg=swe" class="sweden"></a>
		</div>
		<div id="log"> <a href="index.php?page=logon" class="tooltip">Log on<em><span></span>Clik here to log yourself in as admin</em></a><a href="index.php?page=logoff" class="tooltip">Log off<em><span></span>Clik here to log yourself off</em></a></div>

	<div id="administration_link"><a href="index.php?page=admingestion" class="tooltip">Administration<em><span></span>Clik here to add or remove admin account</em></a></div>			<h1 id="title">About Home Exchane</h1>
		</div>
		<!--[if !lte IE 6]>-->
		<img id="fond" src="pictures/monde_continents.gif" alt=""></img>
		<!--<![endif]-->
		<div id="contents">
			

<img id="icon" src="pictures/homeexchange2.gif" alt=""></img>
<div id="sectionbar">
	<div id="section">
		<ul>
			<li><a href="index.php?page=abouthomeexchange&amp;section=ishomeexchangeright" class="potential_oneligne">Is Home Exchange right for your family?</a></li>
			
			<li><a href="index.php?page=abouthomeexchange&amp;section=finding" class="oneligne">Finding a home exchange</a></li>
			<li><a href="index.php?page=abouthomeexchange&amp;section=negotiating" class="potential_oneligne">Negotiating a home exchange</a></li>
			<li><a href="index.php?page=abouthomeexchange&amp;section=preparing" class="potential_oneligne">Preparing for a home exchange</a></li>

			<li><a href="index.php?page=abouthomeexchange&amp;section=thehomeexchange" class="oneligne">The Home Exchange</a></li>
			<li><a href="index.php?page=abouthomeexchange&amp;section=reference" class="oneligne">Reference material</a></li>
		</ul>
	</div>
</div>
...

Voila j'espère ne rien avoir oublié d'important à votre compréhension.

Merci d'avance de votre temps.

Cordialement

++
Modifié par Toj (21 Jul 2008 - 23:01)

beaucoup de position: absolute la dedans, en rustine mets ton div id="top" en float:left ...

Salut,

merci en me faisant reprendre top, je me suis aperçu que celle si était en z-index 0. Apparemment même en redéfinissant le z-index des enfants, le z-index de l'index reste prédominant.

Je suppose que les z-index des enfants servent à les positionner entre eux mais pas avec les frères d'ancêtres.

Merci de m'avoir débloqué et désolé de vous avoir dérangé pour finalement pas grand chose.

Par ailleurs effectivement l'agencement est vraiment très mal foutu, je vais reprendre ça.

++