SweetAlert弹窗弹出时select下拉选项覆盖弹窗如何解决

在使用Inspinia主题开发表单的项目中，点击搜索按钮时会调用SweetAlert弹窗展示校验提示信息，目前存在的问题是：弹窗弹出时，select下拉选项会显示在弹窗上方遮挡弹窗，效果见截图：

此前尝试通过编写CSS调整元素z-index，希望将select选项置于弹窗下方，但代码未生效，尝试的CSS代码如下：

select.form-control option {
    z-index: 100 !important;
}

div.sweet-overlay {
    z-index: 999999 !important;
    overflow-y: visible !important;
}

div.sweet-alert {
    z-index: 999999999;
}

对应HTML代码片段如下：

<form class="form-horizontal">
   .........
        <div class="form-group ">
            <label class="control-label col-sm-4 required"> Discount Type
                <span id="" class="tooltip-Demo"></span> </label>
            <div class="col-sm-6">
                <select type="text" name="" id="dcType" class="form-control">
                    <option value="">Select an Option</option>
                    <option rel="customDc" data-action="" value="cDc">Custom Discount</option>
                </select>
            </div>
        </div>
     ................
</form>

调整z-index的方案不生效，核心原因是浏览器原生select的下拉选项是操作系统层面渲染的原生UI控件，不受网页CSS的z-index层级规则约束，无论给弹窗设置多高的z-index，处于展开状态的原生下拉选项都会悬浮在所有网页DOM元素上层，给option标签设置z-index的写法本身对原生渲染的下拉列表也没有任何效果。

• 方案1（改动最小，优先推荐）：在触发SweetAlert弹窗的逻辑前，先让页面所有select元素失焦，原生下拉框会自动收起，从根源避免下拉框展开遮挡弹窗。代码示例：

// 调用SweetAlert前先执行收起下拉的逻辑
document.querySelectorAll('select.form-control').forEach(selectEl => {
    selectEl.blur();
});
// 后续正常调用SweetAlert即可
swal({
    // 你原本的弹窗配置项
})

• 方案2：替换原生select为自定义下拉组件。Inspinia主题本身内置支持Select2、Chosen这类select美化插件，这类插件的下拉选项是用普通DOM元素模拟实现的，完全受CSS z-index规则控制，不会出现原生控件层级过高的问题。
• 方案3：在SweetAlert的弹出回调中临时给所有select设置隐藏/禁用属性，弹窗关闭后再恢复，该方案交互流畅度不如方案1，不做优先推荐。

提示：无需继续尝试通过调整z-index修复该问题，原生控件的渲染层级高于所有网页渲染的DOM元素，CSS无法修改这个层级优先级。

内容的提问来源于stack exchange，提问作者Nida Amin