Come selezionare le opzioni che si sovrappongono a un DIV con posizione assoluta?

Ho un div posizionato in modo assoluto che funziona come un suggerimento. Al passaggio del mouse su un elemento mostra e poi si nasconde al passaggio del mouse. Ho alcuni elementi <select> nella pagina che si trova sopra l'elemento tooltip. Normalmente il div del tooltip apparirà sopra il tag select. Ma quando un utente fa clic sul tag select e le opzioni vengono visualizzate, si sovrappone al tooltip. Dare uno z-index più alto per il tag select o options non ha funzionato.Come selezionare le opzioni che si sovrappongono a un DIV con posizione assoluta?

enter image description here

Ecco un codice di esempio per illustrare il 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; 
}

fonte

2011-11-18 Sandeep Paul

Questo in tutti i browser? o solo Explorer? Quale versione? Nelle prime versioni di explorer ( steveax

perché non posizionare il tooltip sul lato della selezione. in quel modo, non succederà. – Joseph

Questo non è il problema dei tag select che si sovrappongono in IE6. Solo le opzioni all'interno del tag select compariranno sopra il div. Non funziona in Firefox, IE8, IE9 e Chrome. non ho testato in nessun altro browser. @fskreuz La descrizione comando viene aggiunta dinamicamente, quindi potrebbe apparire in qualsiasi punto della pagina. –

Nessun elemento si applica il valore z-index, senza avere anche un attributo position (assoluto, relativo, fisso, ecc).

Prova ad aggiungere position:relative al tuo select in modo che erediti un valore z-index.

See this screencast for a more in depth explanation.

fonte

2011-11-18 20:36:10 motoxer4533

Anche dopo aver impostato 'position: relative' a' select' e 'options' non funziona. –

Hai modificato anche l'indice z della selezione in modo che sia superiore al popup? – motoxer4533

Ho impostato lo z-index del tooltip più alto di select. –

Prova:

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

Forse il tag form sta dando la sovrapposizione. Dovrebbe funzionare come tu hai, dato che IE tiene conto di z-index.

saluti, -D

fonte

2011-11-18 20:37:42 Downpour046

Non funziona nemmeno con la specifica di 'z-index' per il tag' form'. –

secondo le specifiche (http://docs.webplatform.org/wiki/html/elements/option)

Tranne che per background-color e colore, impostazioni di stile applicati attraverso l'oggetto di stile per l'elemento di opzione vengono ignorati.

E quindi la proprietà z-index viene ignorata e il comportamento predefinito è mostrare il menu a discesa sopra tutti gli elementi del documento.

fonte

2012-12-31 10:39:55

Questo funziona (usando jQuery - dovrebbe essere chiamato l'evento mouseover):

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

sfocatura sembra bastare a IE7-9 e FF. Webkit non rispetta questo (i bug sono archiviati contro questo), quindi la soluzione sembra essere quella di nascondere e mostrare la casella di selezione rapidamente.

fonte

2013-01-03 19:25:53 ScottE

-1

Nascondere Selezionare tramite script è l'opzione corrente disponibile

fonte

2015-07-27 09:04:58 Sopo

Come selezionare le opzioni che si sovrappongono a un DIV con posizione assoluta?

risposta

Problemi correlati