将jQuery自动完成输入的z-index值设置为高于结果列表本身的级别 [英] Set the z-index value of a jQuery autocomplete input a level above the result list itself

问题描述

jQuery Autocomplete小部件的默认行为是将结果列表定位在输入上方一个z-index级别，以便始终可见该z-index级别，但是在我的情况下，这会给文本输入元素带来阴影. >

我尝试从open方法中将z-index值输入元素设置为比结果列表至少高出一级，就像这样，没有太大的成功:

open: function () {
    setTimeout(function () {
        $(this).css('zIndex', 10000);
    }, 1);
},
close: function () {
    $(this).css('zIndex', 0);
}

输入元素的z-index级别确实提升为10000，而结果列表的z-index级别仍保持在级别1，但输入元素仍显示在其下方.

有人知道为什么会这样吗? 结果列表和输入元素的位置属性分别设置为绝对和相对.这可能是原因吗?

解决方案

您可以通过在styleseet中添加简单的规则来做到这一点:

#your_input {
    position: relative;
    z-index: 10000;
}
.ui-autocomplete {
     z-index: 9999 !important;
}

应该完成所有工作，我在萤火虫中对其进行了测试

The default behavior for the jQuery Autocomplete widget is to position the results list one z-index level above the input so that the latter is always visible but in my case this has the undesirable effect of overshadowing the text input element.

I tried to set the z-index value input element at least one level above that of the result list from within the open method like so without much success:

open: function () {
    setTimeout(function () {
        $(this).css('zIndex', 10000);
    }, 1);
},
close: function () {
    $(this).css('zIndex', 0);
}

The z-index level for the input element does get promoted to 10000 while that of the results list remains at level 1 but the input element still appears underneath it.

Does anyone have a clue on why this is happening? The position attributes for the results list and input element are set to absolute and relative respectively. Could that be the cause?

解决方案

You can do it by adding a simple rule to your styleseet:

#your_input {
    position: relative;
    z-index: 10000;
}
.ui-autocomplete {
     z-index: 9999 !important;
}

That should do all the work, I tested it in the firebug

这篇关于将jQuery自动完成输入的z-index值设置为高于结果列表本身的级别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！