html - style - ¿Cómo seleccionar opciones que se superponen a un DIV posicionado absoluto?
html title attribute style (5)
Esto funciona (usando jquery - debe llamarse en el evento mouseover):
var $select = $("select").blur();
if ($.browser.webkit) {
$select.hide();
setTimeout(function() {
$select.show()
}, 5);
}
El desenfoque parece ser suficiente en IE7-9 y FF. Webkit no respeta esto (los errores se archivan contra esto), por lo que la solución parece ser ocultar y mostrar el cuadro de selección rápidamente.
Tengo un div posicionado absoluto que funciona como una información sobre herramientas. Al pasar el mouse sobre un elemento, se muestra y luego se oculta al alejarse el mouse. Tengo pocos elementos <select> en la página que se coloca sobre el elemento de información sobre herramientas. En el caso normal, la información sobre herramientas aparecerá sobre la etiqueta de selección. Pero cuando un usuario hace clic en seleccionar etiqueta y se muestran las opciones, se superpone a la información sobre herramientas. Dar un índice z más alto para la selección o la etiqueta de opciones no funcionó.
Aquí hay un código de ejemplo para ilustrar el problema.
<body>
<h1>Select Options Overlapping Absolute Positioned DIV</h1>
<select name="some-name">
<option>United States</option>
<option>Canada</option>
<option>Mexico</option>
<option>Japan</option>
</select>
<div id="top-layer">
<h2>Overlapping Div</h2>
</div>
</body>
CSS
select, options{ z-index:10;}
#top-layer {
background:#ccc;
color:#000;
border:solid 1px #666;
position:absolute;
top:45px;
left:70px;
z-index:100;
}
Ningún elemento aplicará el valor del z-index sin tener también un atributo de position (absoluto, relativo, fijo, etc.).
Intente agregar position:relative a su select para que herede un valor de z-index .
Ocultar la selección a través del script es la opción actual disponible
Según las especificaciones ( http://docs.webplatform.org/wiki/html/elements/option )
Excepto por el color de fondo y el color, las configuraciones de estilo aplicadas a través del objeto de estilo para el elemento de opción se ignoran.
Y por lo tanto, la propiedad del índice z se ignora y el comportamiento predeterminado es mostrar el menú desplegable sobre todos los elementos del documento.
Tratar:
form, select, options{ z-index:10;}
Tal vez la etiqueta de forma le está dando la superposición. Debería funcionar como usted lo tiene, ya que IE tiene en cuenta el índice z.
Saludos, -D