Описание

В Internet Explorer версий 6.* и младше есть документированный баг: элементы SELECT отображаются поверх всех слоев, независимо от их z-index’а. Вы можете столкнуться с этой проблемой, если, например, захотите сделать на сайте выпадающее меню над формой.

Есть способ обойти этот баг не прибегая к использованию клиентских скриптов: если в слое с меню будет элемент IFRAME, то Internet Explorer отобразит такой слой поверх всего остального. Добавляем в нужный нам DIV элемент IFRAME со стилем z-index: -1, чтобы он обрабатывался браузером, но при этом был не видим.

<style>

	.select-free {
		position:absolute;
		z-index:999;
		overflow:hidden;/*нужное*/
		width:33em;/*должна быть указана*/;
	}
	
	.select-free iframe {
		display:none;/*для IE5*/
		display/**/:block;/*для IE5*/
		position:absolute;/*обязательно*/
		top:0;
		left:0;
		z-index:-1;/*невидимый*/
		filter:mask();/*переключает IE Active X в нужный рендер*/
		width:3000px;
		height:3000px;
	}
	
	.select-free .bd {border:solid 1px #aaaaaa;padding:12px;}

</style>

<div class="select-free">
	<div class="bd">меню</div>
	<![if lte IE 6.5]><iframe></iframe><![endif]>
</div>

Замечание

При этом заметьте, что SELECT под таким слоем не будет рисоваться вообще. Если Ваш DIV имеет прозрачный фон, то SELECT не будет виден сквозь него.