I have a sticky header that needs some z-index to be infront of the page content.
The sticky-header scss is:
.sticky-header {
position: sticky;
top: 0;
padding-top: $spacing;
background-color: $background-color;
z-index: 100;
}
In the content of the page, I have a "modal view" that contains an overlay (modal-container
) element that I want to display above the entire page. The modal css looks like:
.modal-container {
z-index: 3000;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.4);
}
.modal-inner {
z-index: 100;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
For some reason, the sticky header is being displayed above the modal overlay, even though it explicitly has a greater z-index value.
The gist of the html structure is:
<div class="sticky-header">...</div>
<div class="page-content">
<div class="modal-container">
<div class="modal-inner">
...content...
</div>
</div>
</div>
Also the sticky-header wraps an angular ng-content
if that has anything to do with this issue.
Any help is appreciated!