Select2在Lightbox模态框中下拉菜单定位异常问题求助

问题场景 #

使用Select2 4.1、jQuery 3.7，在自定义的absolute定位Lightbox中展示Select2时，下拉菜单出现定位异常：

• 下拉菜单与选择控件脱节，甚至超出屏幕可视范围
• 已设置dropdownParent参数，但滚动页面时下拉菜单位置会偏移，距离Lightbox底部的距离为正常情况的两倍

问题代码 #

<html>
<head>
<script
  src="https://code.jquery.com/jquery-3.7.1.js"
  integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
  crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<style>
#lightbox {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 700px;
    height: 400px;
    margin: -200px 0 0 -350px;
    border: 10px solid #000;
    background: #fff;
    z-index: 9999;
    text-align: left;
    padding:20px;
    overflow: auto;
}

#overlay[id] {
    position: fixed;
}
#overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5000;
    background-color: #000;
    -moz-opacity: 0.8;
    opacity: .80;
    filter: alpha(opacity = 80);
}
</style>

</head>

<div id="overlay" style="display: block;"></div>
<div id='lightbox'>
    <p>See Select2 Below</p>
    <p>See Select2 Below</p>
    <p>See Select2 Below</p>
    <p>See Select2 Below</p>
    <p>See Select2 Below</p>
    <p>See Select2 Below</p>
    <p>See Select2 Below</p>
    <p>See Select2 Below</p>
    <p>See Select2 Below</p>
    <p>See Select2 Below</p>
    <p>See Select2 Below</p>
    <p>See Select2 Below</p>
<select class="js-example-basic-single" name="state">
    <option value="AL">Alabama</option>
     <!-- more states -->
    <option value="WY">Wyoming</option>
</select>

<script>
$(document).ready(function() {
    $('.js-example-basic-single').select2({dropdownParent: jQuery('#lightbox')});
});
</script>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
</div>

解决方法 #

方法1：修改Lightbox的定位方式

将Lightbox的position: absolute改为position: fixed，这样Select2的位置计算不会混淆页面滚动和Lightbox内部滚动的偏移量：

#lightbox {
    position: fixed; /* 替换原absolute */
    top: 50%;
    left: 50%;
    width: 700px;
    height: 400px;
    margin: -200px 0 0 -350px;
    border: 10px solid #000;
    background: #fff;
    z-index: 9999;
    text-align: left;
    padding:20px;
    overflow: auto;
}

方法2：强制下拉菜单相对于控件定位

如果不想修改Lightbox定位，可通过CSS强制下拉菜单的绝对定位，绕过Select2的自动计算逻辑：

/* 强制Select2下拉菜单紧贴控件下方 */
.select2-container--default .select2-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    transform: none !important;
}

同时调整Select2初始化配置，明确下拉位置：

$(document).ready(function() {
    $('.js-example-basic-single').select2({
        dropdownParent: $('#lightbox'),
        dropdownPosition: 'below', // 强制下拉在控件下方
        dropdownAutoWidth: false
    });
});

原因说明 #

问题根源在于Lightbox使用position: absolute且带有overflow: auto，Select2在计算下拉位置时，错误叠加了页面滚动偏移和Lightbox内部滚动偏移，导致下拉菜单位置错位。改为fixed定位后，Lightbox的滚动不会影响页面滚动计算；通过CSS强制定位则直接跳过Select2的自动偏移计算，确保下拉菜单与控件对齐。

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