3

我正在使用 uniForm (http://sprawsm.com/uni-form/) 和 jQuery UI 选择菜单 (http://jsfiddle.net/fnagel/hsn95/light/)。

问题是，下拉菜单并没有“放在”统一元素的“顶部”……所以看起来真的很荒谬。我尝试更改 selectmenu.css 的 z-index，但没有任何运气......

有什么想法吗？

我应该补充一点，我从 uniForm 中删除了它并且没有问题，但恐怕它在那里一定是有原因的......

z-index:1;
4

8 回答 8

3

这是我对您在统一支持论坛上发布的同一问题的回答的转贴：

我在这里无法提供任何深入的帮助，所以我将仅解释 z-index。

Uni-Form 元素之所以有 z-index 属性是因为另一个属性，即 position: relative; 并且 z-index 规则用于确保相对定位的元素在堆栈中足够低，以便其他绝对定位的元素可以越过它们，具有讽刺意味的是，这正是您遇到的问题。这很可能是由于 jQuery SelectMenu 没有明确地将 z-index 属性设置为其绝对定位的元素（理想情况下应该这样做）。

在这种情况下，从 Uni-Form 中删除 z-index 属性绝对没问题，因此可以为 jQuery SelectMenu 的绝对定位元素设置一个显式的 z-index 值（大于 1 的任何值）。

于 2011-05-22T14:42:53.527 回答
3

我在使用 jQuery 对话框和选择菜单时遇到了 z-index 问题。

为了解决这个问题，我找到了对话框的 z-index 并将选择菜单的下拉部分设置为它。

我用过这样的东西：

var dialogZindex = $('.ui-dialog').css('z-index');
$('.ui-selectmenu-menu-dropdown').css('z-index', dialogZindex);
于 2011-11-23T19:41:12.523 回答
3

您必须将 z-index 和位置都更改为原始选择上的相对位置。这将起作用。

<select style='position:relative;z-index:100'>
于 2012-11-03T18:00:31.540 回答
1

隐藏在 Foundation 显示模式对话框后面的 JQuery UI 自动完成也有同样的问题。

我找到的解决方案是一个 CSS 规则：

.ui-front{ z-index:1010; } /*get in front of .reveal-modal z-index:1005*/

于 2015-03-05T05:18:12.217 回答
1

您可以使用选择菜单的“appendTo”属性来解决此问题。您可以传递您希望选择菜单位于其之上的部门的 id/class。这对我有用。

于 2017-05-12T06:18:48.560 回答
0

就我而言，它有助于设置选择菜单的宽度。

$( "#myid" ).selectmenu({width:100});

没有这个，下拉菜单出现在对话框后面。

于 2014-07-09T13:58:58.143 回答
0

通过我的测试，以下配方有效。

$("#selectId").selectmenu("menuWidget").parent().css("z-index", "9999");
于 2014-12-09T01:14:09.007 回答
0

我在带有 Chrome ( https://developer.chrome.com/devtools/docs/remote-debugging )的 Android 上使用远程调试来查找选择菜单 UI 弹出窗口 (.ui-popup-container) 的 jQuery 类并设置它的 z -索引通过：

.ui-popup-container {
    z-index: 1000010;
}

我的 z-index 如此之大，因为第 3 方 UI 元素的 z-index 很大，我想放在上面。

于 2016-04-26T12:45:24.263 回答