Почему z-index работает странным образом?

Question

Честно говоря, проблему я уже решил, причем сам и случайно. Но мне стало интересно, почему это сработало именно так:

Есть контейнер и псевдо :before к нему, вот строки:

.slide-1__content {
  display: flex;
  flex-direction: column;
  width: 770px;
  row-gap: 40px;
  position: relative;
  z-index: 2;
}

.slide-1__content::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: -20%;
  top: -50%;
  width: 558px;
  height: 558px;
  background-image: url(img/after1.svg);
}

<div class="slide-1__content">
  <h1 class="slide-1__content__header">Meaningful investments in Main Street businesses</h1>
  <p class="slide-1__content__text">Browse vetted investment offerings in communities all over the US.</p>
  <a href="#" class="slide-1__content__btn">GET STARTET</a>
</div>

Как я себе представляю, как это должно получится в итоге:

И как это выглядит в итоге:

:before перекрывал контейнер и не давал ни выделять текст, ни пользоваться кнопкой. Решилось все тем, что z-index ему надо было присвоить отрицательный. Однако я смотрел в 3 справочника, и везде были примеры, как положительные z-index обоих элементов работали корректно: тот элемент, у которого значение было меньше, стоял позади того элемента, у которого это значение выше.

Почему у меня на странице не заработало так, как было написано в справочниках?

БЛОГ НА HUSL

Почему z-index работает странным образом?

Ответы (0 шт):