Place component on top of all others - z-index not working

Dash Python
1

I can’t seem to make the hello button be on top. It goes on top of other components, but not on top of tab buttons and dcc.Graph / dt.Table components

import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})
app.layout = html.Div([
    html.Div([
        html.Button('hello', id='hello')
        ],
        style={
            'position': 'fixed',
            'z-index': 2147483647,
            'top': '0px',
            'right': '0px',
            'margin': 0,
            'padding': 0
            # 'width': '55px',
            # 'height': '55px'
    }),
    html.Div([
        dcc.Tabs(),
        dcc.Tabs(),
        dcc.Tabs(),
        dcc.Tabs(),
        dcc.Tabs(),
        dcc.Tabs(),
        dcc.Tabs(),
        dcc.Tabs(),
        dcc.Graph(figure={}),
        dcc.Graph(figure={}),
        dcc.Graph(figure={})
    ], style={'z-index': 1})
])

if __name__ == '__main__':
    app.run_server()
1 Like
2

Same problem here. Is there any alternative to z-index?

3

z-index works fine, it’s just that in Dash, when specifying CSS styles, you need to use camel case for hyphenated style names. So if you change z-index to zIndex, you’ll be good.

6 Likes
4

Awesome, it works, thanks!
I’m not sure but I don’t think I’ve seen that in the Dash documentation, could be useful maybe?
Cheers

5

Yep it’s in there, on this page.

2 Likes