Sticky header z-index lower than overlay z-index but still appears in front

Question

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!

Answer 1

Usually this is caused by a misunderstanding of the stacking index .

The easiest way to debug it is to manually stick a huge z-index on each parent element of the <div class="modal-container"> until you find out which is the problematic element.

At a guess, you've set position:relative on your <div class="page-content"> , and you've given it a z-index of less than 100.