[Form] Superposition d'une liste select sur une div 'absolute'

**BRAUKRIS** · 06/02/2007, 16h50

Ma page possède une <div> en position absolute mais le composant html select s'affiche avant et donc ne se met pas en arrière plan.

Ce bug est connu des développeurs web mais je n'ai pas trouvé de solution séduisante pour le corrigé, merci d'avance.

**blueice** · 06/02/2007, 16h55

Peux tu nous donner ton code merci

Si je traduis ce que tu dis ca doit donner ca :

Code html :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Untitled</title>
    <style type="text/css" title="text/css">
/* <![CDATA[ */
#main { position:absolute; width:400px; height:200px; background-color:gray; }
/* ]]> */
</style>
</head>
<body>
<div id="main">
<form action="toto" method="post">
<select id="tutu" size="10">
<option label="tata" value="titi"></option>
</select>
</form>
</div>
</body>
</html>

et chez moi ca marche correctement le select se trouve à l'intérieur du div...

**BRAUKRIS** · 06/02/2007, 17h16

Le code est effectivement cohérent avec ma question, j'ai cependant ajouté un element <label>.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Untitled</title>
    <style type="text/css" title="text/css">
/* <![CDATA[ */
#main { position:absolute; width:400px; height:200px; background-color:gray; }
/* ]]> */
</style>
</head>
 
<body>
<div id="main"></div>
<form action="toto" method="post">
<select id="tutu" size="10">
<option label="tata" value="titi"></option>
</select>
<html:input type="text"/>
<label>Coucou</label>
</form>
 
</body>
</html>

On remarque que la div couvre le label mais pas le select.

**blueice** · 06/02/2007, 17h28

Ton form se trouve en dehors du div !!
C'est tout à fait normal qu'il est couvert

Entoure ton form avec ton div et plus de problème...

**BRAUKRIS** · 06/02/2007, 17h39

Ton form se trouve en dehors du div !!
C'est tout à fait normal qu'il est couvert

Entoure ton form avec ton div et plus de problème...

La div est en position absolute donc sortie du flux normal. Teste mon code est tu verras que la balise html <libelle> est bien couverte alors que le select non

**NicoWrmCorp** · 06/02/2007, 17h49

En disposant le div gênant en arrière plan (z-index -1) sa doit coller non ?

Code :

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

1
2
 
main { position:absolute;z-index:-1; width:400px; height:200px; background-color:gray; }

**blueice** · 06/02/2007, 17h51

Si tu souhaites que tout soit "dessus" place tes éléments à l'intérieur du div !

Maintenant avec ton code, chez moi, tout est masqué par la div, ce qui me semble tout à fait normal étant donné que la position absolute sort le cadre du flux!

Sinon indique précisément ce que tu souhaites comme résultat ...

**Bisûnûrs** · 07/02/2007, 09h02

FAQ Javascript.

**Nicolas.Cogi** · 09/02/2007, 18h43

bug IE5 et 6 windows, résolu sur IE7.

Le widget windows utilisé par IE pour les select est plus balaise que ceux utilisé pour les autres elements.
Uniquement un iframe peut passer au dessus des select dans IE 5 et 6.

Une solution souvent utilisé est de positionner un iframe créé dynamiquement entre ton div et ton select (j'entend "entre" sur le plan z-index, par exemple select.z-index = 1, iframe.z-index = 2, div.z-index = 3).

le div passe bien au dessus de l'iframe, et l'iframe passe bien au dessus du select.

Maintenant, plutot que de faire du javascript pénible pour creer l'iframe et la positionnée ou il faut, je dirais plutot tant pis pour les gars encore sous IE6

[Form] Superposition d'une liste select sur une div 'absolute'

HTML

Discussions similaires

Partager

Partager