如何让Altair下拉框动态定位到图例下方（适配所有屏幕尺寸）

我已有许久未编写CSS代码，现寻求帮助：希望将Altair图表下方的下拉列表移至图例下方，并实现动态适配所有屏幕尺寸。

我的DataFrame代码如下：

data = {
    'Adj Close': [1.308934, 2.169581, 2.876765, 2.357847, 2.179156],
    'Yahoo Finance return': [0.670226, 1.298566, 0.920492, -0.721652, -0.306659],
    'date_x': ['2015-01-01', '2015-02-01', '2015-03-01', '2015-04-01', '2015-05-01'],
    'Return in USD': [-0.641970, 0.428617, 0.404568, 0.125614, 0.070045]
}

# Convert the dictionary into a DataFrame
df = pd.DataFrame(data)

# Make sure that 'date_x' is a datetime column
df['date_x'] = pd.to_datetime(df['date_x'])

图表创建代码：

final_melted = df.melt(id_vars=['date_x'], var_name='Metric', value_name='Value')
selection_metric_1 = alt.binding_select(options=['Adj Close', 'None','Yahoo Finance return',  'Return in USD'], name='Metric 1 ')
select_metric_1 = alt.selection_single(fields=['Metric'], bind=selection_metric_1, name="Selector 1")

# Dropdown selection for the second metric
selection_metric_2 = alt.binding_select(options=['Adj Close','None', 'Yahoo Finance return',  'Return in USD'], name='Metric 2 ')
select_metric_2 = alt.selection_single(fields=['Metric'], bind=selection_metric_2, name="Selector 2")

# Dropdown selection for the third metric
selection_metric_3 = alt.binding_select(options=['Adj Close','None', 'Yahoo Finance return', 'Return in USD'], name='Metric 3 ')
select_metric_3 = alt.selection_single(fields=['Metric'], bind=selection_metric_3, name="Selector 3")

line_chart = alt.Chart(final_melted).mark_line().encode(
    x='date_x:T',
    y=alt.Y('Value:Q', axis=alt.Axis(title='Metric Value')),
    color='Metric:N'
)

# Points layer, making it easier to hover over individual points
points = alt.Chart(final_melted).mark_point().encode(
    x='date_x:T',
    y='Value:Q',
    color='Metric:N',
    tooltip=['date_x:T', 'Value:Q', 'Metric:N']
).properties(
    width='container',
    height=800
)

# Conditional filters based on the selection
filtered_chart = alt.layer(line_chart, points).add_selection(
    select_metric_1,
    select_metric_2,
    select_metric_3
).transform_filter(
    select_metric_1 | select_metric_2 | select_metric_3
).interactive()

configured_chart = filtered_chart.configure_axis(
    titleFontSize=15,
    labelFontSize=15
).configure_legend(
    titleFontSize=17,
    labelFontSize=15
).configure_title(
    fontSize=24
)

我知道需要使用CSS，但无法实现动态定位，当前使用的绝对定位CSS代码如下，屏幕尺寸变化时下拉框位置会错乱：

form.vega-bindings {
  position: absolute;
  right: 0px;
  top: 350px;
}

步骤1：调整图表基础配置实现响应式 #

将图表宽度设置为'container'，让图表自适应父容器宽度，确保屏幕缩放时图表尺寸动态调整，如代码中points.properties(width='container', height=800)。

步骤2：用相对定位+Flex布局实现下拉框动态对齐 #

替换原有绝对定位CSS，使用以下代码：

/* 给图表容器设置相对定位，作为下拉框的定位参考 */
.vega-embed {
  position: relative;
  width: 100%;
}

/* 下拉框容器定位到图例下方 */
form.vega-bindings {
  position: absolute;
  top: calc(100% + 20px); /* 始终在图表底部外20px处 */
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 10px; /* 下拉框之间的间距 */
  width: fit-content;
}

/* 小屏幕适配：下拉框居中显示 */
@media (max-width: 768px) {
  form.vega-bindings {
    right: 50%;
    transform: translateX(50%);
  }
}

步骤3：固定图例位置（可选） #

如果图例默认位置不固定，可通过Altair配置锁定图例在右侧，确保下拉框对齐精准：

configured_chart = filtered_chart.configure_legend(
    titleFontSize=17,
    labelFontSize=15,
    orient='right',
    padding=20
)

原理说明 #

• .vega-embed作为相对定位容器，下拉框的绝对定位会基于该容器计算，避免屏幕缩放时错位。
• top: calc(100% + 20px)保证下拉框始终在图表底部下方，不受图表高度变化影响。
• Flex布局让下拉框垂直有序排列，媒体查询优化小屏幕显示效果。

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