[HTML/CSS] Afficher un calque au dessus d'un <select>

1 message   •   Page 1 sur 1
Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 10684 Messages

15 nov. 2006, 15:30

Vous avez très certainement déjà rencontré ce problème sur IE, de liste déroulante qui reste par dessus vos calques avec des menus dynamiques, des calendriers ou autre. Le problème vient du fait que les élément de type "Windowed" comme les plug-ins ou les <select> recouvrent n'importe quel calque, quelque soit le z-index que vous lui attribuez.

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... :x

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
Ce n'est pas en améliorant la bougie que l'on a inventé l'ampoule...

1 message   •   Page 1 sur 1