Search code examples
htmlcssheaderblazorsyncfusion

Why does my main content overlaps my sticky top bar in Blazor Syncfusion?

I'm creating a application in Syncfusion blazor and this total content is divided in two sections: top row and content. The top row is sticky but somehow when I scroll down the main content will overlap the top row, I want that top row is always visible and wont get overlapped, how can i achieve this?

Default scroll position(on top):

enter image description here

When scrolled down a tiny bit:

enter image description here

As u can see the main content will overlap the top row, how can i avoid this and get the main content behind this top row bar instead of over the bar?

CSS top row:

enter image description here

CSS main content:

enter image description here

Solution

  • Add a z-index: 2000 to .top-row in site.css.

    This will make the header the top most layer so the content won't overlap.