将select元素放在具有z-index位置的div到Highcharts容器中

Question

我想将dropdown（html select）放置到position：absolute的元素，但是当我按下选择打开菜单时它不会打开的问题。按钮按下但没有打开。

我在这块板上有板（潜水元素）有很多瓷砖（div）和css一样：

position:absolute
z-index: 2

其中一个包含名为Highcharts的图表库。 Highcharts容器的z-index = 0

所以它看起来像

<div class='tile'> //position: absolute, z-index = 2
     <div class='highcharts-container'> //position: relative, z-index = 0
          <div class='controlPanel'>   //position:absolute, no z-index
              <button 1> //relative
              <button 2> //relative
              <wanna place here dropdown, so select> //!!!my dropdown
          </div>
     </div>
</div>

我试着将dropdown放在div容器中，位置相对，但没有任何结果。

我的补充代码：

 var chooseContainer = $('<div class="rangeContainer"></div>');
 var chooseRange = $('<select class="rangeDropdown"></select>');
 var element1 = $('<option value="volvo">Volvo</option>');
 var element2 = $('<option value="saab">Saab</option>');
 chooseContainer.append(chooseRange);
 chooseRange.append(element1);
 chooseRange.append(element2);
 chartControlPanel.append(chooseContainer);
 chartControlPanel.append(addBtn);
 chartControlPanel.append(resetBtn);
 chartControlPanel.append(legendBtn);

编辑（绘制它的外观）：

提前致谢！ ：）

的jsfiddle：

http://jsfiddle.net/akorovin/cq2be/

对于highcharts或我的css来说可能是个问题

Answer 1

您拥有的代码似乎工作正常 - ＆gt; http://jsfiddle.net/8uU2w/这只是假设变量为＆＃34; chartControlPanel＆＃34;是＆＃34; highcharts-container＆＃34;元件。查看＆＃34;是否存在逻辑错误。 chartControlPanel＆＃34;被定义为。这似乎是一个问题。另外，请检查您的javascript控制台是否存在任何与之相关的明显错误。

chartControlPanel.append(chooseContainer);

- ＆GT; http://jsfiddle.net/8uU2w/

Answer 2

感谢@Fusher在Highcharts论坛。

他的消息：

  

Highcharts容器点击事件是绑定的，因此在highcharts-container中添加下拉列表并不是最好的主意。我认为将它直接添加到容器和位置下拉列表更容易，如下所示：http://jsfiddle.net/bMkHd/8/

所以这意味着。不要向.highcharts-container添加任何内容。最好把它放在包含.highcharts-container的div上，比如：

 $('#container').highcharts(...)
 $('#container').append(myDropdown)