【发布时间】：2020-09-01 13:21:04
【问题描述】：
我正在遇到div下降下下降（从破折号的dash）下降（dcc.dropdown），当已经选择了从菜单中的多个选项而不是在下面的图像中重叠时（或发送到返回取决于z-index）。下拉列表在另一个 div 中。我已经尝试更改 css 显示和位置，但没有积极的结果。
代码如下所示：
html.Div([
html.Div(children=html.H2('SIMILAR PLAYERS', className='titulo_ventanah2'), className='titulo_ventana'),
html.Div(children=[(html.I(className='search')),'Search by:'],style={'display':'inline-block','padding-left':'15%', 'font-size':'13px'}),
html.Div(children=(dcc.Dropdown(style={'height':'20px', 'font-size':'14px'},persistence_type='session')),style={'display':'inline-block', 'padding':'0px 0px 0px 10px', 'width':'200px', 'margin-top':'5px'}),
html.Div(children=(dcc.Dropdown(multi=True,style={'height':'20px', 'font-size':'14px'})),style={'padding':'0px 0px 0px 10px', 'width':'400px', 'margin-top':'5px'}, className='similardiv'),
html.Div([
html.Div(children=[html.Div(html.H3('Top 15 most similar players',className='titulo_ventanah3'),className='titulo_ventanaint'),
html.Hr(),
html.Div([children=dcc.Graph())])],className='similar_players'),
])
],className='container1')
还有一些组件的 CSS 代码：
.container1 {
position: fixed;
width:80%;
height:100%;
display:inline-block;
left:20%;
margin: 0 auto;
padding: 0 0px;
box-sizing: border-box;
overflow: hidden;
top:0;
overflow:auto;
background-color: #f5f5f5;
}
.titulo_ventana {
top:0;
display:inline-block;
background-color: #f5f5f5;
padding-left:2%;
margin: 0px 0px 0px 0px;
}
.titulo_ventanah2 {
text-decoration: none;
font-size: 20px;
line-height:45px;
color: #8f8f8f;
margin: 0px 0px 0px 0px;
display: inline-block;
letter-spacing: 0.01em;
}
.titulo_ventanaint {
overflow: hidden;
z-index:5;
height:39px;
display:inline-block;
background-color: white;
}
.titulo_ventanah3 {
max-width:100%;
text-decoration: none;
font-size: 14px;
color: black;
line-height:45px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
text-align: left;
overflow:hidden;
letter-spacing: 0.01em;
}
.similar_players {
width: 97%;
overflow: auto;
height:540px;
font-size: 15px;
color: #002e5c;
background-color: white;
margin-top:1.5%;
margin-left:1.5%;
display: block;
position:relative;
z-index:1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.similardiv {
position:relative;
z-index:2;
display:inline-block;
}
我希望解决方案是改变元素的 display 或 position 属性，但我相信这与 dash 组件的默认 css 相关，可以在 here 找到。
您可以在link查看仪表板
如果我按照 CBroe 在 cmets 中的建议将 .Select-menu-outer 的位置更改为相对位置，则仅在打开菜单时才会发生以下情况：
【问题讨论】：
-
“您可以查看链接中的仪表板” - 我在那里看到的与您屏幕截图中的情况不符。属性下拉列表不包含 any 选项，并且输入 & 搜索(?) 似乎也没有做任何事情。如果需要特定步骤才能使此匹配屏幕截图显示的内容，那么您应该解释这些是什么。否则 - 请提供一个正确的示例。
-
.Select-menu-outer似乎是绝对定位的，即在您的示例中显示“未找到结果”的容器。用position: relative覆盖它会使其余内容向下移动 - 但也会弄乱标题显示。如果我试图通过对那些内联块容器应用垂直对齐来解决这个问题……那么上述元素将内容向下推的效果就会再次丢失。 -
抱歉链接中的仪表板，下拉菜单是空的，因为数据是通过其他地方的按钮上传的。我实际上需要有人像您一样查看页面源代码。我尝试将
.Select-menu-outer的位置更改为相对位置，但它不会向下推下面的 div，它只会上升，因为我将在下一次编辑中向您展示我将对问题进行的编辑 -
它确实下推了下面的内容。但由于这些内联块 div 的垂直对齐方式，它旁边的 div 位于底部，而不是顶部。 （正如我所说，试图通过指定与默认值不同的垂直对齐来解决这个问题，似乎再次取消了相对定位的效果。）
-
现在的问题是它只有在打开下拉菜单时才会下推下面的div。当它关闭时，即使
.Select-menu-outer具有相对定位，它仍然会重叠。所以它可能是另一个类？
标签： python html css plotly-dash