I'm currently trying to create a fixed header bar that allows the content of the page to scroll beneath it rather than displaying above it. This functionality is working on multiple pages, but I'm experiencing issues with my calendar page.
When scrolling, the content should behave as shown in this image: https://i.stack.imgur.com/lz6v4.png
On other pages, the content successfully goes under the header bar. However, on the calendar page, this behavior doesn't work. Below is the HTML and CSS code for the header bar:
<div class="headerclass">
<nz-header class="header-bar">
...
</nz-header>
<!--dropdownMenu-->
<div class="menu">
...
</div>
</div>
/* Media queries for smaller screens */
@media screen and (min-width: 800px) {
#menuButton {
display: none;
}
}
...
.headerclass {
position: fixed;
width: 100%;
z-index: 1;
}
The use of z-index can be seen in the CSS snippet above. Am I implementing it correctly? The following code pertains to the calendar section:
<div class="calendar">
...
</div>
.calendar {
margin-left: 2%;
margin-right: 2%;
padding-top: 75px;
z-index: 2;
}
This particular section utilizes the ng-zorro library. If anyone has insights on how to resolve this issue, I would greatly appreciate it.