javascript - 使用 Bluefieldscom intl-tel-input，如何使标志下拉菜单不与其他输入重叠？

Question

如您在屏幕截图中所见，我有 3 个输入，当我单击第一个时，第二个和第三个输入的标志将位于第一个下拉列表的顶部。

我怎样才能让这个下拉菜单位于“顶部”或让另一个留在后台？

下面是 jsfiddle 链接:

http://jsfiddle.net/DtMwr/

$(function() {
    $("#p1").intlTelInput({
        preferredCountries:['US', 'CA', 'AU', 'BR', 'SG', 'DE', 'NL', 'RU', 'IE'],
        americaMode: false
    });
    $("#p2").intlTelInput({
        preferredCountries:['US', 'CA', 'AU', 'BR', 'SG', 'DE', 'NL', 'RU', 'IE'],
        americaMode: false
    });
    $("#p3").intlTelInput({
        preferredCountries:['US', 'CA', 'AU', 'BR', 'SG', 'DE', 'NL', 'RU', 'IE'],
        americaMode: false
    });
});

Answer 1

这确实是由 z-index 问题引起的。

我正在查看错误元素(ul)的 z-index。

下面是我用来解决问题的代码:

var z = 1000;
$.each($(".intl-tel-input"), function() {
    this.style.zIndex = z;
    z--;
});

.intl-tel-input 是创建下拉输入时创建的新 div。