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

你为什么不用css？

例子：

.intl-tel-input{
z-index: 1000 !important; //!important overrides the inline-value
}

Answer 2

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

我正在查看错误元素（ul）的 z-index。

以下是我用来解决问题的代码：

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

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