javascript - 将选择元素放入具有 z-index 位置的 div 到 Highcharts 容器

Question

我想将下拉菜单(html 选择)放置到位置为:绝对的元素，但问题是当我按下选择打开菜单时它不会打开。按下按钮但未打开。

我在这个板上有板(潜水元素)，有很多带有 css 的图 block (div)，例如:

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>

我试图将下拉列表放入具有相对位置的 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

您的代码似乎工作正常 -> http://jsfiddle.net/8uU2w/这只是假设“chartControlPanel”的变量是“highcharts-container”元素。查看“chartControlPanel ”的定义方式是否存在逻辑错误。这似乎是问题所在。还要检查您的 javascript 控制台是否有任何明显的相关错误。

chartControlPanel.append(chooseContainer);

-> http://jsfiddle.net/8uU2w/