Javascript 如何防止从css中的其他下拉菜单隐藏下拉选项？

下面是用于下拉列表的两个图像。我在同一页的每个页面和内部都有几个下拉列表。单击下拉菜单时，会触发其所有选项，但最后一个选项会在另一个选择下拉菜单选项下受阻。（参考：图2）如何预防？ 相应下拉菜单的3个选项是：Profile、Word、Hashtag。Hashtag选项受到阻碍。请在此处检查完整代码：

图1

图2

我正在尝试以下代码：

$（“.custom select”）。每个（函数（）{
var classes=$（this.attr（“类”），
id=$（this.attr（“id”），
name=$（this.attr（“name”）；
var模板=“”；
模板+=''+$（this.attr（“占位符”）+''；
模板+=''；
$（this.find（“option”）.each（function（）{
模板+=''+$（this.html（）++''；
});
模板+=''；
$（此）.wrap（“”）；
$（this.hide（）；
$（此）.after（模板）；
});
$（“.custom选项：类型的第一个”）.hover（函数（）{
$（this）.parents（“.customoptions”）.addClass（“选项悬停”）；
}，函数（）{
$（this）.parents（“.customoptions”）.removeClass（“选项悬停”）；
});
$（“.custom select trigger”）。单击（“click”，函数（）{
$（'html'）.one（'click'，function（）{
$（“.custom select”）.removeClass（“打开”）；
});
$（this）.parents（“.custom select”）.toggleClass（“opened”）；
event.stopPropagation（）；
});
$（“.custom option”）。在（“单击”，函数（）{
$（this.parents（“.custom select wrapper”）.find（“select”）.val（$（this.data（“value”））；
$（this）.parents（“.custom options”）.find（“.custom option”）.removeClass（“selection”）；
$（此）.addClass（“选择”）；
$（this）.parents（“.custom select”）.removeClass（“opened”）；
$（this.parents（“.custom select”）.find（“.custom select trigger”）.text（$（this.text（））；
});
正文{
背景：#ededed；
字体系列：“开放式Sans”，无衬线；
}
.中心{
位置：绝对位置；
显示：内联块；
顶部：50%；左侧：50%；
转换：翻译（-50%，-50%）；
}
/**自定义选择**/
.自定义选择包装器{
位置：相对位置；
显示：内联块；
用户选择：无；
}
.自定义选择包装器选择{
显示：无；
}
.自定义选择{
位置：相对位置；
显示：内联块；
}
.自定义选择触发器{
位置：相对位置；
显示：块；
宽度：230px；
填充：0 84px 0 22px；
字体大小：20px；
字体大小：300；
颜色：#fff；
线高：40px；
背景：#265a88；
边界半径：4px；
光标：指针；
}
.自定义选择触发器：在{
位置：绝对位置；
显示：块；
内容：''；
宽度：10px；高度：10px；
顶部：50%；右侧：25px；
利润上限：-3px；
边框底部：1px实心#fff；
右边框：1px实心#fff；
变换：旋转（45度）translateY（-50%）；
过渡：全部。4s轻松进出；
变换原点：50%0；
}
.custom-select.opened.custom-select触发器：之后{
利润上限：3倍；
变换：旋转（-135度）平移（-50%）；
}
.自定义选项{
位置：绝对位置；
显示：块；
顶部：100%；左侧：0；右侧：0；
最小宽度：100%；
利润率：15px0；
边框：1px实心#b5；
边界半径：4px；
框大小：边框框；
盒影：0.2px1pRGBA（0,0,0,07）；
背景：#fff；
过渡：全部。4s轻松进出；
不透明度：0；
可见性：隐藏；
指针事件：无；
转换：translateY（-15px）；
}
.custom-select.opened.custom选项{
不透明度：1；
能见度：可见；
指针事件：全部；
变换：translateY（0）；
}
.自定义选项：在{
位置：绝对位置；
显示：块；
内容：''；
底部：100%；右侧：25px；
宽度：7px；高度：7px；
保证金底部：-4px；
边框顶部：1px实心#b5；
左边框：1px实心#b5；
背景：#fff；
变换：旋转（45度）；
过渡：全部。4s轻松进出；
}
。选项悬停：在{
背景#f9f9f9；
}
.自定义选项{
位置：相对位置；
显示：块；
填充：0 22px；
边框底部：1px实心#b5；
字号：18px；
字号：600；
颜色：#b5；
线高：47px；
光标：指针；
过渡：全部。4s轻松进出；
}
.自定义选项：类型的第一个{
边界半径：4px4p0；
}
.自定义选项：类型的最后一个{
边界底部：0；
边界半径：0 0 4px 4px；
}
.自定义选项：悬停，
.custom-option.selection{
背景#f9f9f9；
}

轮廓
单词
话题标签
您可以通过两种方式解决此问题：

第一个是在css中设置z-index，如：
。自定义选项{z-index:1；}


第二个是设置位置，如：
。自定义选项{position:relative；}

第一种解决方案将使幕墙显示在另一个图元的上方，第二种解决方案将在默认情况下保留空间以使其正确显示（即使在幕墙关闭时）
try
z-index
？