Relative order of elements breaks with position fixed

Dash Python
1

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)
2

I was able to figure it out myself. The style parameter you want to set is position: -webkit-sticky;
This solution uses a separate design.css in the folder assets.

Design CSS

#headline {
    width: 100%;
    height: 100%;
    position: -webkit-sticky;
    position: sticky;
    vertical-align: middle;
    text-align: center;
    top: 0;
    z-index: 999;
    background: #EDF0F6;
}