Pb : Je n'arrive plus à cliquer à cause d'un z-index

Bonjour,

Je suis en train de créer un site et j'ai un pb avec ma page css.
J'ai utilisé la propriété z-index pour mettre une image (en fait un cadre pour que ce soit plus joli) au dessus de plusieurs 'select' qui sont contenus dans un 'div'.
L'image est dans un 'div' et les 'select' sont dans un 'div', mais les 'div' sont successifs (c'est-à-dire non imbriqués). Le pb que j'ai est que je n'arrive plus à cliquer sur les 'select'.
Si qqun a une idée, qu'il n'hésite pas!

Voici la partie html :

<div id = "cadre">
          
        </div>
      
        <div id = "search">
          <input id = "searchText" type="text" size="15" />
          <input id = "searchBtn" type="button" value="Chercher" OnClick="actualise();" />
          <br />
        
          <select id = "genre" size="5" onchange= "actualise();">
            <option value = "-1" selected> Tous </option>
          </select>
        
          <select id = "artiste" size="5" onchange= "actualise();">
            <option value = "-1" selected> Tous </option>
          </select>
        
          <select id = "album" size="5" onchange= "actualise();">
            <option value = "-1" selected> Tous </option>
          </select>
        
          <select id = "annee" size="5" onchange= "actualise();">
            <option value = "-1" selected> Tous </option>				
          </select>
        </div>

et la partie css :

#cadre
{
	position: absolute;
	top: 42%;
	left: 20%;
	width: 60%;
	height: 24%;
	/*border: solid 1px red;*/
	background: transparent url(../images/cadre.png) no-repeat;
	z-index: 3;
}
#searchText
{
	position: absolute;
	top: 42.8%;
	left: 21%;	
	z-index: 1;
	/*margin-top: 10px;
	margin-left: 30px;
	margin-bottom: 15px;*/
	border: 2px outset black;
}

#searchBtn
{
	/*display: none;*/
	position: absolute;
	top: 42.8%;
	left: 32.4%;
	z-index: 1;
	cursor: pointer;
	/*margin-top: 10px;
	margin-left: 5px;
	margin-bottom: 15px;*/
	border: 2px outset black;
}

#searchBtn:hover
{
	color: #222;
	/*margin-top: 10px;
	margin-left: 5px;
	margin-bottom: 15px;*/
	border: 1px outset black;
}

#searchBtn:active
{
	color: #444;
	/*margin-top: 10px;
	margin-left: 5px;
	margin-bottom: 15px;*/
	border: 1px inset black;
}

#genre
{
	position: absolute;
	top: 47%;
	left: 21%;
	z-index: 1;
	cursor: pointer;
	/*margin-left: 30px;
	margin-bottom: 15px;*/
	background: #ddd;
	width: 100px;
	border: 2px outset black;
}

#artiste
{
	position: absolute;
	top: 47%;
	left: 30.9%;	
	z-index: 1;
	cursor: pointer;
	/*margin-bottom: 15px;
	margin-left: 0px;*/
	background: #ddd;
	width: 200px;
	border: 2px outset black;
}

#album
{
	position: absolute;
	top: 47%;
	left: 50.5%;	
	z-index: 1;
	cursor: pointer;
	/*margin-bottom: 15px;
	margin-left: 0px;*/
	background: #ddd;
	width: 200px;
	border: 2px outset black;
}

#annee
{
	position: absolute;
	top: 47%;
	left: 70.1%;
	z-index: 1;
	cursor: pointer;
	/*margin-bottom: 15px;
	margin-left: 0px;*/
	background: #ddd;
	width: 70px;
	border: 2px outset black;
}

romain13 a écrit :

J'ai utilisé la propriété z-index pour mettre une image au dessus de plusieurs 'select' ... Le pb que j'ai est que je n'arrive plus à cliquer sur les 'select'.

Jusque là, rien d'étonnant. L'image est au dessus, donc tu ne vois plus les select...

A partir du moment où tes select sont contenus dans le bloc qui a un background, tu n'es pas obligé de mettre sur ce bloc un z-index supérieur à celui de tes select pour voir le contour.

Enlève tous tes z-index pour voir...

Si je ne mets aucune propriété z-index, les différents 'select' apparaissent au-dessus de l'image (représentant un cadre, pour donner un aspect plus arrondi au niveau des bords).

En fait, j'ai 2 'div' successifs dans mon code html contenant respectivement le cadre et les différents 'select'. Je les ai placé en 'absolute' dans la page html et j'aimerais que le cadre apparaisse au-dessus des 'select' pour recouvrir les bordures, tout en conservant le controle sur les 'select' (i.e. le fait de pouvoir cliquer dedans).

Si qqun a une idée,.....