Plotly Dash Boostrap 下拉菜單呈現在 plotly 圖形對象后面。 有辦法阻止這種情況嗎？

Question

我正在制作一個 plotly - dash 應用程序，它有一個導航側欄來瀏覽不同的應用程序頁面（見下面的代碼）。 其中一個導航項包含一個 dbc.DropDownMenu，它懸在導航側邊欄的邊緣進入主要內容區域。

大多數時候這不是問題，除非主要內容區域中有 plotly 個圖表。 當有圖表時，下拉菜單呈現在圖表下方（見圖片）。 是否可以更改渲染順序始終將下拉列表顯示在頂部？

# styling the sidebar
SideBar_Style = {
    "position": "fixed",
    "top": 0,
    "left": 0,
    "bottom": 0,
    "width": "18rem",
    "padding": "2rem 1rem",
    "background-color": "#f8f9fa",
}

# padding for the page content
Content_Style = {
    "margin-left": "18rem",
    "margin-right": "2rem",
    "padding": "2rem 1rem",
}


sidebar = html.Div(
[
    html.H2("Navigation", className="display-4"),
    html.Hr(),
    html.P(
        "Select a page", className="lead"
    ),
    dbc.Nav(
        [dbc.NavLink("Home", href="/", active="exact"),
            dbc.NavLink("Timeseries", href="/pages/timeseries",
                        active="exact"),
            dbc.NavItem(
                dbc.Row([
                    dbc.Col(dbc.NavLink("Wind Roses",
                            href="/pages/windrose", active="exact"), width=10),
                    dbc.Col(dbc.DropdownMenu([dbc.DropdownMenuItem("Comparison", href="/pages/windrosecomparison", active="exact"),
                                              dbc.DropdownMenuItem("Item 2")], nav=True), width=2)], className="g-0")

        ),

            dbc.NavLink("Monthly Wind Speeds",
                        href="/pages/monthwindspeeds", active="exact"),
            dbc.NavLink("Recovery", href="/pages/recovery",
                        active="exact"),
            dbc.NavLink("Wind Shear", href="/pages/windshear",
                        active="exact"),
            dbc.NavLink("Diurnal", href="/pages/diurnal", active="exact"),
            dbc.NavLink("Campaign Map",
                        href="/pages/campaignmap", active="exact"),
            dbc.NavLink("TestPage", href="/pages/testpage",
                        active="exact"),
        ],
        vertical=True,
        pills=True,
    ),
],
style=SideBar_Style,
)

content = html.Div(id="page-content", children=[], style=Content_Style)

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    sidebar,
    content
])

Answer 1

正如 Daniel Al Mouiee 所建議的那樣，更改圖形父容器的 Z-Index 解決了這個問題