How to move Bokeh chart to back layer in HTML/CSS so it does not cover nav?

Hi, I am using a bokeh chart ( specifically “from bokeh.plotting import figure”) in my website. The chart works well except it remains on a top layer so when I have my navigation menu open, it hovers over the nav menu.

Any suggestions where to look to make it so the chart does not cover the nav menu when it is open?

I found an old post in this community here that seems to tackle this issue. But it didn’t work for me. Here’s what I have tried:

1. adjusting my css with div.bk-canvas-wrapper{z-index: 0!important;} based on https://discourse.bokeh.org/t/change-canvas-z-index/1248 recommendation.

2. adjusting the nav z-index to 99999

3. I have downloaded the java cdn and edited all the z-index to 0, just to see if that had any effect, but I got none.

Here is a picture of my issue:

bokehCoverNav1162×656 50.9 KB

I have a stackoverflow post here

It was a problem with the z-index but I was focusing on wrong element of my navbar. This seems silly now, but I guess from this experience I learned two thing:

1. for z-index to work on a element, that element needs position assigned as well.
2. for moving an element to a higher layer, z-index should go on the element closest to the root element that you want moved up - even if the root element isn’t the problem… In other words, my purple navbar at top of my screen was fine (most of the time), but it was the root element of the gray sidebar/menu. Therefore, If the purple navbar at top isn’t z-indexed above the bokeh chart then no matter how much I z-index: 9999 the sidebar/menu, it will still be covered by the bokeh chart.

If anyone else has a similar problem I have more details of my css solution in my stackpost (linked in original post).

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.