[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 ...

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

HTML

Vue hybride

Discussions similaires

Partager

Partager