¿Cómo seleccionar opciones que se superponen a un DIV de posición absoluta?

Tengo una div posicionada absoluta que funciona como una información sobre herramientas. Al pasar el mouse sobre un elemento, se muestra y luego se oculta al desplazarse. Tengo pocos elementos <select> en la página que se encuentra encima del elemento de información sobre herramientas. En el caso normal, la información sobre herramientas div aparecerá sobre la etiqueta de selección. Pero cuando un usuario hace clic en la etiqueta de selección y se muestran las opciones, se superpone a la información sobre herramientas. Dar un índice z más alto para la etiqueta de selección o opciones no funcionó.¿Cómo seleccionar opciones que se superponen a un DIV de posición absoluta?

enter image description here

Aquí es 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; 
}

Fuente

2011-11-18 Sandeep Paul

¿Esto en todos los navegadores? o solo Explorer? ¿Qué versión? En las primeras versiones de explorer ( steveax

por qué no coloque su información sobre herramientas al costado de la selección. de esa manera, eso no sucederá. – Joseph

Este no es el problema de las etiquetas de selección que se superponen en IE6. Solo las opciones dentro de la etiqueta de selección aparecerán arriba del div. No funciona en Firefox, IE8, IE9 y Chrome. no lo he probado en ningún otro navegador. @fskreuz Tooltip se agrega dinámicamente, por lo que podría aparecer en cualquier lugar de la página. –

Ningún elemento se aplicará el valor z-index sin tener también un atributo position (absoluta, relativa, fijo, etc).

Intente agregar position:relative a su select para que herede un valor de z-index.

See this screencast for a more in depth explanation.

Fuente

2011-11-18 20:36:10 motoxer4533

Incluso después de establecer 'position: relative' en' select' y 'options' no funciona. –

¿Cambió también el índice z de la selección para ser más alto que el menú emergente? – motoxer4533

Establecí el índice z de la información sobre herramientas más alta que la selección. –

Probar:

form, select, options{ z-index:10;}

Tal vez la etiqueta de formulario que está dando la superposición. Debería funcionar como lo tienes, ya que IE tiene en cuenta el índice Z.

Saludos, -D

Fuente

2011-11-18 20:37:42 Downpour046

No funciona incluso con la especificación de 'z-index' para la etiqueta' form'. –

De acuerdo con las especificaciones (http://docs.webplatform.org/wiki/html/elements/option)

excepción de color de fondo y el color, la configuración de estilo aplicadas a través del objeto de estilo para el elemento de opción se ignoran.

Y, por lo tanto, se ignora la propiedad z-index y el comportamiento predeterminado es mostrar el menú desplegable sobre todos los elementos en el documento.

Fuente

2012-12-31 10:39:55

Esto funciona (usando jQuery - debería ser llamado en el caso de pasar el ratón):

var $select = $("select").blur(); 
if ($.browser.webkit) { 
    $select.hide(); 
    setTimeout(function() { 
    $select.show() 
    }, 5); 
}

desenfoque parece ser suficiente en IE7-9 y FF. Webkit no respeta esto (los errores se archivan en contra de esto), por lo que la solución parece ser ocultar y mostrar el cuadro de selección rápidamente.

Fuente

2013-01-03 19:25:53 ScottE

-1

Ocultar secuencia de comandos es la opción actual disponible

Fuente

2015-07-27 09:04:58 Sopo

¿Cómo seleccionar opciones que se superponen a un DIV de posición absoluta?

Respuesta

Cuestiones relacionadas