Comment sélectionner les options chevauchant un DIV positionné en absolu?

J'ai une absolue positionné div qui fonctionne comme une info-bulle. Sur la souris sur un élément, il montre puis se cache à la souris. J'ai quelques <select> des éléments de la page qui est placé au-dessus de la bulle d'aide de l'élément. Dans le cas normal, l'info-bulle div apparaîtront au cours de la balise select. Mais quand un utilisateur clique sur la balise select, et les options sont indiquées, il chevauche l'info-bulle. Donner un z-index supérieur pour sélectionner des options ou de la balise ne fonctionne pas.

Comment sélectionner les options chevauchant un DIV positionné en absolu?

Voici un exemple de code pour illustrer le problème.

<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;
}

source d'informationauteur Sandeep Paul

  1. 3

    Selon les spécifications (http://docs.webplatform.org/wiki/html/elements/option)

    Sauf pour la couleur d'arrière-plan et la couleur, le style, les paramètres appliqués à travers le style de l'objet de l'option élément sont ignorées.

    Et donc la propriété z-index est ignoré et le comportement par défaut est d'afficher le menu déroulant au-dessus de tous les éléments du document.

  2. 2

    Aucun élément ne permet d'appliquer le z-index valeur sans avoir aussi un position attribut (absolue, relative, fixe, etc).

    Essayez d'ajouter position:relative à votre select de sorte qu'il hérite d'un z-index valeur.

    Voir ce screencast pour une plus ample explication.

  3. 1

    Cela fonctionne (à l'aide de jquery doit être appelée sur l'événement mouseover):

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

    flou semble suffire dans IE7-9 et FF. Webkit n'est pas présent (les bugs sont déposées à l'encontre de cela), alors la solution semble être de masquer et d'afficher la boîte de sélectionner rapidement.

  4. 0

    Essayer:

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

    Peut-être la forme de la balise est de le donner à la superposition. Il devrait fonctionner comme vous l'avez, que IE ne prendre en compte de z-index.

    Ce qui concerne,
    -D

  5. -1

    Cacher Sélectionnez à l'aide d'un script est l'option disponible