probleme de z-index

**boboss123** · 18/02/2010, 13h45

bonjour,

voici ma page 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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
	<title>TEST</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
	<style type="text/css" media="screen">
	body{
		margin:0;
		padding:0;
		height:100%;
	}
 
	#db_bg{
		z-index:100;
		top:0;
		left:0;
		width:100%;
		height:30%;
 
		margin:0;
		background-color: #555555;
 
		position: fixed;
 
		-moz-opacity:0.5;
		opacity: 0.5;
		filter:alpha(opacity=50);
	}
 
 
	/* inf a IE7 */
	* html #db_bg{
		position:absolute;
	}
 
	p{
		color:red;
	}
	</style>	
</head>
 
<body>
	<p>Salut ça va ?</p>
	<select>
		<option value="0">Menu 1</option>
		<option value="1">Menu 2</option>
		<option value="2">Menu 3</option>
	</select>
	<p>Salut ça va ?</p>
	<p>Salut ça va ?</p>
	<p>Salut ça va ?</p>
	<p>Salut ça va ?</p>
	<p>Salut ça va ?</p>
	<p>Salut ça va ?</p>
	<p>Salut ça va ?</p>
	<p>Salut ça va ?</p>
	<p>Salut ça va ?</p>
	<p>Salut ça va ?</p>
 
	<div id="db_bg"></div>
 
</body>
</html>

Rendu sous IE6 :

Rendu sous Firefox :

Sous ie6, pourquoi la listbox passe au dessus de mon voile #db_bg alors que le z-index est de 100 ? comment résoudre le problème "proprement" ?

merci d'avance,

**Erwan31** · 18/02/2010, 14h51

Pourquoi vouloir rendre le select inutilisable?
L'élément select est ce qu'on appelle un élément fenêtré (windowed élément) c-a-d qu'il s'affiche sur un autre plan d'affichage indépendant aux éléments non fenêtrés, le z-index n'aura donc aucun effet.
La solution pour faire passer la div au dessus est de l'inclure dans un iframe (prenant les caractéristiques de styles de la div ici) mais aura pour effet de masquer entièrement le select.
> à ma connaissance pas de solution.

**boboss123** · 18/02/2010, 15h00

Envoyé par Erwan31

Pourquoi vouloir rendre le select inutilisable?

je veux créer un voile qui rende inaccessible mon formulaire (j'affiche aussi au milieu de mon écran un message d'attente) pendant que j'envoie des requêtes ajax dont le traitement est assez long.
C'est quand meme bizarre le problème n'est que sous IE6 et les listbox (je n'ai pas de probleme avec les textbox)

Il n'y a vraiment aucune autre solution pour faire ça :'( ? je suis tout à fait près à utiliser du javascript (car le voile est affiché à l'aide de javascript)

**Erwan31** · 18/02/2010, 15h38

Pour info l'alias moz-opacity est inutile depuis les FF0.8 (je crois) ou une des premières version.
Et pour IE8 il faut ajouter une ligne

Code :

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

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

A ma connaissance la seule solution est d'imbriquer ta div dans un iframe (comme le fond d'ailleurs pas mal de libraires JS (lighbox...)).
Si c'est implémenté sur ces library c'est que ça doit être le meilleur compromis existant.
Je te conseil d'oublier l'effet de transparence (qui est un effet cosmétique qui ne sert pas à grand chose ici...).

**boboss123** · 18/02/2010, 15h45

ok merci beaucoup pour ces infos maintenant je sais un peu plus dans quel direction chercher => je vais chercher dans les lib (je veux absolument ce système pour ma page web)

probleme de z-index

Positionnement en CSS avec z-index

Discussions similaires

Partager

Partager