Не могу задать linear-gradient родителю

Question

Пол дня бьюсь.. Не могу задать linear-gradient родителю, тогда как у дочерних элементов (main-block__container) он работает. z-index не работает для main-block

html

.wrapper {
  min-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._container {
  max-width: 107rem;
  box-sizing: content-box;
  padding: 0 1.5rem;
  margin: 0 auto;
}
._container__narrow {
  max-width: 80rem;
  box-sizing: content-box;
  padding: 0 1.5rem;
  margin: 0 auto;
}

.page {
  flex: 1 1 auto;
}
._bgimg {
  position: relative;
}

._bgimg img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

.main-block {
  position: relative;
  background-image: linear-gradient(180deg, #242633 11.98%, rgba(45, 52, 60, 0.38) 51.04%, #242B33 92.19%);
}

.main-block__container {
  position: relative;
  z-index: 2;
  padding: 29.6rem 0 7.4rem;
}
        
.main-block__img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.main-block__title {
  font-size: 4.8rem;
  line-height: 133.3333333333%;
  margin: 0 0 10rem;
}

.main-block__icon {
  margin: 0 auto;
  margin-bottom: 20rem;
}

.main-block__contacts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.main-block__contact {
  font-size: 1.8rem;
  line-height: 116.6666666667%;
  padding: 0 0 0 3rem;
}

.main-block__contact:first-child {
  background: url("../img/icons/place.svg") left center no-repeat;
}

.main-block__contact:last-child {
  background: url("../img/icons/tel.svg") left center no-repeat;
}

<section class="main-block">
    <div class="main-block__container _container__narrow">
        <h1 class="main-block__title title">blablablalblabla</h1>
        <img src="img/icons/mouse.svg" alt="scroll" class="main-block__icon">
        <ul class="main-block__contacts">
            <li class="main-block__contact"><a href="#map" class="main-block__link">addr</a></li>
            <li class="main-block__contact"><a href="tel:" class="main-block__link">1 (123) 123-45-67</a></li>
        </ul>
    </div>

    <div class="main-block__img _bgimg">
        <img src="img/main-background.jpg" alt="bgbgbf">
    </div>

</section>

Answer 1

Все дело в контексте наложения, если вы родить задаёте z-index то дочерние элементы не опустятся ниже его

По поводу комментария:

И если вам действительно интересно, градиент полупрозрачный, картинку видно, но это абсолютно не касается темы вопроса.

Как раз касается это вопроса, если честно, нет времени разбираться в html структуре и понять что автор хотел этим получить, если вы упрощаете до минимального воспроизводимого примера, то отвечающему достаточно нажать кнопку запустить в сниппете

Такой результат вы ожидали?:

.container {
  width: 400px;
  height: 200px;
  background-image: linear-gradient(180deg, #242633 11.98%, rgba(45, 52, 60, 0.38) 51.04%, #242B33 92.19%)
}


.image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="container">
  <div class="image-wrapper">
    <img src="https://www.fillmurray.com/640/360" class="image" />
  </div>
</div>

БЛОГ НА HUSL

Не могу задать linear-gradient родителю

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