使用 Bluefieldscom intl-tel-input，如何使标志下拉列表不与其他输入重叠？答案

【问题标题】：Working with Bluefieldscom intl-tel-input, how can I make the flag dropdown not overlap with other inputs?使用 Bluefieldscom intl-tel-input，如何使标志下拉列表不与其他输入重叠？
【发布时间】：2013-10-07 21:21:00
【问题描述】：

从屏幕截图中可以看出，我有 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
    });
});

【问题讨论】：

无法访问您的代码或jsfiddle，我只能告诉您这似乎是一个 z-index 问题。
@BrianRay jsfiddle.net/DtMwr 这是小提琴，我无法让图像正常工作，但你可以在那里看到类似的标志下拉问题。

标签： javascript css drop-down-menu intl-tel-input

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

你为什么不用css？

例子：

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

【讨论】：