Relative перекрывает fixed?

Question

[LocalHero]

Почему relative блок перекрывает fixed блок, у которого даже Z-INDEX больше, и в html находится он выше?

&__subtitle {
      position: relative;
      padding-bottom: 20px;
      font-size: 16px;

      &::after {
         content: '';
         position: absolute;
         bottom: 0;
         height: 2px;
         width: 84px;
         background-color: $yellow;
         margin-left: 50%;
         transform: translateX(-50%);
         border-radius: 10px;
      }
   }

.nav-menu {
      z-index: 2;
      width: 100%;
      padding: 30px 0;
      margin: 0;
      left: 0;
      top: -100%;
      background-color: black;
      position: fixed;
      transition: top 0.2s;
      text-align: center;
      font-size: 22px;
      overflow: auto;

      &__item{
         display: block;
         padding: 0;
         margin: 20px 0;
      }
   }

   .nav-menu.active {
      top: 0;
   }

Comments

[wadowad]

Очевидно у родительского блока, в котором находится контент, но который находится на одном уровне с менюшкой z-index выше. Дайте ссылку на сайт.

[LocalHero]

wadowad, https://localhero123.github.io/aa/dist/index.html - это min. Если что могу скинуть папку src архивом. first-screen__subtitle налезает на менюшку, а остальные элементы first-screen`а нет. Когда у first-screen__subtitle убираю relative, то менюшка начинает перекрывать, но тогда полоска смещается. Могу сделать эту полоску отдельным элементом, но всё же хочу понять, почему так происходит, если даже z-index стоит выше

[szQocks]

LocalHero, https://developer.mozilla.org/en-US/docs/Web/CSS/C...

Answer 1

[Beladonna]

Могу ошибаться, но вероятнее всего из-за position: absolute