<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Capa sobre Formulario</title>
	<style type="text/css">
		.sp{font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 1px;text-decoration:none;color: #EFEFEF;line-height:1px}
	</style>
	<script language="JavaScript1.2" type="text/javascript">

		// Función encargada de desplazar la capa por el documento
		function desplazar_capa(evt)
		{
			// Capturamos el Evento
			var e = (window.event) ? window.event : evt;
			
			// Instanciamos los dos objetos
			var capa = document.getElementById("capa");
			var obj_iframe_oculto = document.getElementById("iframe_oculto");
			
			// Determinamos las coordenadas del raton.
			X = e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
			Y = e.clientY + document.documentElement.scrollTop + document.body.scrollTop;
	
			// Mostramos las coordenadas del raton por pantalla
			document.getElementById("info").innerHTML = "X= " + X + "  Y = " + Y;
			
			
			// Movemos la capa a las coordenadas del raton
			capa.style.left = X + 10;
			capa.style.top = Y + 25;
			
			// Ponemos a nuestra capa una opacidad para que sea algo transparente y se vea el contenido del fondo
			capa.style.filter="alpha(opacity=85)"; // Opacidad para IE
			capa.style.opacity="0.85"; // Ocapacidad para Netscape

			// Quitamos al Iframe TODA la opacidad para que sea totalmente transparente y se vea el fondo
			obj_iframe_oculto.style.filter="alpha(opacity=0)"; // Opacidad para IE
			obj_iframe_oculto.style.opacity="0.00"; // Ocapacidad para Netscape

			// Hacemos que la capa sea totalmente visible
			capa.style.display = "block";
			// Definimos el ancho del IFRAME igual que el ancho de la capa, para que no se le vea
			obj_iframe_oculto.style.width = capa.offsetWidth;
			obj_iframe_oculto.style.height = capa.offsetHeight;
			// Posicionamos el IFRAME en la misma posición que la capa (para que esté siempre detras)
			obj_iframe_oculto.style.top = capa.style.top;
			obj_iframe_oculto.style.left = capa.style.left;
			// Bajamos de Z-index el IFRAME, para que esté debajo de la capa
			obj_iframe_oculto.style.zIndex = capa.style.zIndex - 1;

			// Definimos que el contenido del IFRAME esté VISIBLE
			obj_iframe_oculto.style.display = "block"; // ESTA ES LA LINEA MAS IMPORTANTE
		}
	</script>
</head>
<body style="margin:0px" onmousemove="desplazar_capa(event);">
<table cellpadding="0" cellspacing="0" style="width:100%;height:100%" border="0">
	<tr>
		<td width="100%" height="100%" class="sp" align="center" valign="middle">
			<form action="javascript:void(null)">
			<table cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td width="150" height="25" align="left" valign="top">Select Multiple</td>
					<td width="150" align="left" valign="top">Select Normal</td>
					<td width="150" align="left" valign="top">Textarea</td>
					<td width="150" align="center" valign="top">Boton</td>
					<td width="150" align="left" valign="top">Checkbox</td>
					<td width="150" align="left" valign="top">Radiobutton</td>
				</tr>
				<tr>
					<td colspan="6" width="100%" height="1" bgcolor="#000000" class="sp">&nbsp;</td>
				</tr>
				<tr>
					<td colspan="6" width="100%" height="20" class="sp">&nbsp;</td>
				</tr>
				<tr>
					<td width="150" align="left" valign="top"><select multiple><option>Elemento Select</option></select></td>
					<td width="150" align="left" valign="top"><select><option>Elemento Select</option></select></td>
					<td width="150" align="left" valign="top"><textarea style="width:150px;height:150px"></textarea></td>
					<td width="150" align="center" valign="top"><input type="Button" value="Boton"></td>
					<td width="150" align="left" valign="top"><input type="Checkbox" value="Checkbox"></td>
					<td width="150" align="left" valign="top"><input type="Radio" value="Radiobutton"></td>
				</tr>
				<tr>
					<td colspan="6" width="100%" height="20" class="sp">&nbsp;</td>
				</tr>
				<tr>
					<td colspan="6" id="info" align="center"></td>
				</tr>
			</table>
			</form>
		</td>
	</tr>
</table>
<div id="capa" style="position:absolute; top:25px; left:50px; width:100px; height:40px padding:4px; display:none; background-color:#7598DE; color:#ffffff; z-index:100;">Esta es nuestra capa en la que tenemos el texto.<br><br>¿Se ocultará tras el SELECT?</div>

<iframe id="iframe_oculto" scrolling="no" frameborder="0" style="position:absolute; top:0px; left:0px; display:none;"></iframe>

</body>
</html>