A défaut de mieux, certains auront déjà tenté de masquer les selects lorsque le calque était affiché... et auront généralement eu droit aux remarques désobligeantes des utilisateurs, pensant fièrement avoir perçu un bug dans la disparition des combos...
Et bien la solution s'appelle "shim iframe", et consiste simplement à caler une iframe juste sous le calque
Comment ça marche : depuis IE 5.5, l'iframe bénéficie d'un statut particulier qui lui permet d'exister aussi bien dans le zindex des "Windowed Elements" (plugins, Scriptlets DHTML, ...), que dans celui des "Windowless Elements" (block html classiques). Ainsi, en calant une iframe de même taille sous votre div, celle-ci bloquera l'effet du <select> et permettra l'affichage du calque par dessus :
<style>
.element { /* taille et position du div et de la frame */
width:100px;
height:50px;
position: absolute;
top: 2px;
left: 50px;
}
</style>
<select><option>Ma liste déroulante est en arrière plan</option></select>
<div style="z-index:2;background-color:lightblue;" class="element">
Mon calque au premier plan
</div>
<iframe src="javascript:false;"
style="z-index:1;filter=progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)"
frameborder="0"
class="element">
</iframe>
- Le div a un z-index de "2" pour être au premier plan (et un background bleu pour vous le monter), l'iframe de "1" pour être en dessous, le select par défaut étant à "0".- La source de l'iframe évite d'aller charger une page
- Le filter permet de la rendre transparente si jamais le contenu du div nécessitait ce genre d'effet (angles arrondis, etc.)
Plus d'infos sur le z-index