# Relative order of elements breaks with position fixed

**URL:** <https://community.plotly.com/t/relative-order-of-elements-breaks-with-position-fixed/47558>\
**Category:** Dash Python\
**Created:** [November 25, 2020, 10:10am UTC](https://community.plotly.com/t/relative-order-of-elements-breaks-with-position-fixed/47558 "2020-11-25T10:10:06Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![cx\_opsilon](https://avatars.discourse-cdn.com/v4/letter/c/ad7895/32.png) [@cx\_opsilon](https://community.plotly.com/u/cx_opsilon)\
**Post date:** [November 25, 2020, 10:10am UTC](https://community.plotly.com/t/relative-order-of-elements-breaks-with-position-fixed/47558/1 "2020-11-25T10:10:06Z")

</div>

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?**

```auto
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)

```

---

<div class="post-metadata">

**Author:** ![cx\_opsilon](https://avatars.discourse-cdn.com/v4/letter/c/ad7895/32.png) [@cx\_opsilon](https://community.plotly.com/u/cx_opsilon)\
**Post date:** [February 24, 2021, 7:40pm UTC](https://community.plotly.com/t/relative-order-of-elements-breaks-with-position-fixed/47558/2 "2021-02-24T19:40:28Z")

</div>

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**

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

```