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

Question

我正在使用 Foundation 4 并尝试在使用 ajax 加载元素时使用微调器进行叠加。叠加层和微调器正在显示，就在选择下方，所以很明显它看起来很傻。在 fiddle 中，它正在工作: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;}

好的，我只是尝试添加 position:relative 到 .fadedCtrl 和 !important 到 position: relative 和 z-index:10 所以现在该行是:

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

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

感谢 Sheng 的解决方案:

    .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 无关紧要，因为选择输入是具有微调器的 div 的子。

这行不通，因为当添加 ctrl_overlay 类时，div 具有背景图像。此图像将出现在 div 中的所有内容后面。

解决方案？有另一个股利。使用完全相同的类，但附加一个 child div。这个 div 现在可以有一个比选择输入更高的 z-index。两个 child 可以有不同的 z 索引，但 parent 和 child 不能。