叠加显示在背景而不是顶部

Question

我正在使用Foundation 4，并且在使用ajax加载元素时尝试使用微调器进行叠加。叠加和微调器正在显示，正好在选择之下，所以很明显它看起来很傻。在小提琴中，它起作用：http://jsfiddle.net/jenborn/95pUd/2/

以下是它看起来如何的图像：

我有一个内部选择的div：

<div class="small-3 columns"  id="DIV_select2"  >
   <div>
   <select id="select2" name="select2" class="medium">
   <option value='0'>None selected</option>
   </select>
   </div>
</div>

我已经尝试减少正在发生的选择的z-index和不透明度，但它没有将叠加层推到顶部

的jQuery

$("#select2").addClass('fadedCtrl');
$("#DIV_select2").fadeIn(100,function(){$(this).addClass('ctrl_overlay');});

这是我正在尝试使用的css类。

.ctrl_overlay {position:relative; left: 0px; top: 0px; width: 100%; height: 60%; z-index: 5000;background-color:#666666;opacity:.8;background: url("/images/big-grey-spinner.gif") no-repeat scroll center center #666666; }

.fadedCtrl {z-index: 10;opacity:.1;}

好的，我只是尝试添加位置：相对于.fadedCtrl和！important到position：relative和z-index：10以便该行现在是：

.fadedCtrl {z-index: 10 !important;opacity:.1;position: relative !important;}

它仍然无法正常工作，但它确实将选择按下了一点：

解决方案感谢盛：

    .ctrl_overlay {position: absolute; left: 0; top: 50%; width: 100%; height: 48px; margin-top: -24px;background-color:#666666;opacity:.8;background: url("/images/big-grey-spinner.gif") no-repeat scroll center center #666666;}
form.custom .custom.dropdown {margin-bottom: 0;}
     $("#DIVselect2").append("<div id='DIVXselect2'></div>");
     $("#DIVXselect2").fadeIn(100,function(){$(this).addClass('ctrl_overlay');});

Answer 1

您的代码不起作用的原因是：设置z-index无关紧要，因为select输入是具有微调器的div的子。

这不起作用，因为当添加ctrl_overlay类时，div具有背景图像。此图像将显示在后面 div中的所有内容。

解决方案？有另一个div。使用完全相同的类，但附加子 div。此div现在可以具有高于选择输入的z-index。两个孩子可以有不同的z指数，但父母和孩子不能。