Discussion :

[Mage-Li]

Bonjour,
J'ai essayé la fonction z-index avec différent positionnement pour le conteneur comme pour le div fils et bien d'autre fonction, mais rien n'y fait !

J'ai donc un conteneur ( div header) qui contient du javaScript (serais-se lui le méchant ?) et la div (tabarea) que je veux faire passer sous l'image du background de mon conteneur (header).
Le positionnement de ces 3 éléments est bon. Je veux juste que mon menu (tabarea) passe sous l'image de background de mon header.

Mon code HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="header">
			<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>
			</div>
		</div>

Et le CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
div#header {
	position: relative;
	background: url(../images/pack-a/pa-header.png) 50px 0% no-repeat;
	height: 294px;
}
 
 
div#newsflash {
	width: auto;
	margin-left: 350px;
	margin-right: 30px;
	border: 1px solid #00f;
}
 
div#tabarea {
	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;
}

D'avance merci pour vos suggestions !

[ciberrique]

Bonsoir,
attention au conteneur et contenu :

Ton header contient tabarea il sera donc mis en dessous (malgrès le z-index).

Ca c'est ok pour le z-index :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<div style="z-index:0; height:10px; position:relative"></div>
<div style="z-index:-1; top:-10px; position:relative"></div>

Le deuxième div sera en dessous du premier même si il est déclaré aprés (attention il faut que le div soit positionné pas de static).

Par contre cela ne fonctionnera pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div style="z-index:0; height:10px; position:relative">
<div style="z-index:-1; top:-10px; position:relative"></div>
</div>

Ici le deuxieme div reste dessus le premier.

[bobby51]

salut tout le monde
je relance le sujet car je suis exactement dans ce cas
je cite ciberrique

Par contre cela ne fonctionnera pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div style="z-index:0; height:10px; position:relative">
<div style="z-index:-1; top:-10px; position:relative"></div>
</div>

Ici le deuxieme div reste dessus le premier.

je doit absolument avoir mon div conteneur etre affiché au premier plan par rapport a mon div contenu

des idées ?

merci d'avance

[e-fitz]

Bonsoir,

Si ton deuxieme div est fils du premier alors le z-index n'aura pas d'effet.
Le z-index fonctionne pour des éléments frères.

Je te propose de créer ton propre topic avec tous les détails de ton problème.