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

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

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, 17h55

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, 18h16

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, 18h28

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, 18h39

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, 18h49

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, 18h51

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