Relative order of elements breaks with position fixed

I want to have a navigation bar on top of my screen and two tabs starting right below the navigation bar. When I use the style-element position: fixed for the nav bar however, it changes the relative order of my Div elements. The tabs now appear under the navigation bar. If I set a fixed margin-top value for my tabs, they appear on different positions, depending on the screen dimensions (Retina / curved monitor).

What can I do to display my Tabs right after the navigation bar?

import plotly.graph_objects as go
import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(
    __name__,
    meta_tags=[{'name': 'Test'}],
)

layout_dashboard1 = html.Div(
    id="maindiv",
    children=[
        html.Div([
            html.H6("Header nav bar")
        ], style={"position": "fixed",  "z-index": "999", "background": "#EDF0F6", "width": "100%"}),

        html.Div(children=[
            dcc.Tabs(id="tabs", value='tab-1', children=[
                dcc.Tab(label='Tab 1', value='tab-1', children=[
                        html.Div(
                            id="causal_card_graph",
                            children=[
                                dcc.Graph(id='graph1'),
                            ],
                        ),
                    ]),
                dcc.Tab(label='Tab 2', value='tab-2', children=[html.Label("Test")]),
            ]),
        ]),
    ])

server=app.server
app.layout = layout_dashboard1

if __name__ == "__main__":
    app.run_server(debug=True)

1 post - 1 participant

Read full topic