Определенные элементы, на которые z-index не влияет после псевдокласса

Question

Итак, я создаю целевую страницу с изображением 100vh, с белым наложением, используя следующее:

#showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url('../img/showcase.jpeg');
  background-attachment: fixed;
  height: 100vh;
  position: relative;
  z-index: -2;
}

#showcase:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(#eee, 0.7);
  z-index: -1;
}

<section id="showcase">
  <img id="logo" src="img/logo.png" alt="" />
  <h1 class="display-4 text-center">Test text</h1>
  <a href="#">DO SOMETING</a>
</section>

Это работает ожидаемо, когда я пытаюсь добавить кнопку или тег привязки к содержимому элемента div, который я не могу щелкнуть или выделить.Текст в теге h и изображение могут быть выделены отлично

Answer 1

Просто z-index выпуск.

#showcase {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(../img/showcase.jpeg);
    background-attachment: fixed;
    height: 100vh;
    position: relative;
   /* z-index: -2; Remove this line*/
}

Answer 2

Просто удалите z-index:-2 из родительского элемента, а затем поместите ребенка с более высоким z-index

#showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: lightblue;
  height: 100vh;
  position: relative;
  /*  z-index: -2; -- remove  this */
}

#showcase:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
}

#showcase * {
  position: relative;
  z-index: 1;
}

<section id="showcase">
  <img id="logo" src="img/logo.png" alt="" />
  <h1 class="display-4 text-center">Test text</h1>
  <a href="#">DO SOMETING</a>
</section>