我正在使用 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');});
最佳答案
您的代码不起作用的原因是:设置 z-index 无关紧要,因为选择输入是具有微调器的 div 的子。
这行不通,因为当添加 ctrl_overlay 类时,div 具有背景图像。此图像将出现在 div 中的所有内容后面。
解决方案?有另一个股利。使用完全相同的类,但附加一个 child div。这个 div 现在可以有一个比选择输入更高的 z-index。两个 child 可以有不同的 z 索引,但 parent 和 child 不能。
关于jquery - 叠加显示在背景中而不是在顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20317709/