Plotly Dash Date Picker Range弹出日历被下方输入控件遮挡如何解决

该问题是日期选择器弹出面板的堆叠层级（z-index）低于部分下方组件导致的，可通过以下两种方法解决，优先使用第一种无需额外写CSS：

方法1：启用with_portal参数（最优解） #

dcc.DatePickerRange自带with_portal参数，开启后会将弹出的日历面板直接挂载到页面根节点body下，不受父容器的层级、裁剪属性限制，直接解决遮挡问题。
修改你的DatePickerRange代码，新增参数即可：

dcc.DatePickerRange(
    id='date-picker-range',
    min_date_allowed=min_date,
    max_date_allowed=max_date,
    initial_visible_month=datetime.datetime(datetime.datetime.today().year, 1, 1).date(),
    show_outside_days=True,
    day_size=32,
    display_format='DD/MM/YYYY',
    clearable=True,
    # 新增此行
    with_portal=True
)

你之前尝试的style = {'container': 'body'}是无效写法，该组件没有对应style属性，with_portal才是实现该功能的官方参数。

方法2：通过CSS调整层级 #

如果方法1不生效，可通过全局CSS强制提高日历面板的层级：

1. 在你的Dash项目根目录新建assets文件夹（如果还没有的话），在文件夹内新建custom.css文件，写入以下内容：

/* 提高日期选择器弹出面板的堆叠层级 */
.DateRangePicker_picker {
    z-index: 9999 !important;
}

2. 也可以直接在你的Dash布局中插入html.Style组件写入样式，示例：

app.layout = html.Div([
    html.Style('''
        .DateRangePicker_picker {
            z-index: 9999 !important;
        }
    '''),
    # 你的其他布局代码
    controls,
    # 其他内容
])

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