0

Пол дня бьюсь.. Не могу задать 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>

9
  • Нашел на просторах как наложить градиент псевдо элементом after, но все равно оч интересно, почему не срабатывает по родителю.
    – Ruslanyo
    24 сен 2021 в 17:53
  • запустил сниппет, градиент прорисовывается. Уточните вопрос. Нажмите в вашем примере кнопку "выполнить код"
    – Greg--
    24 сен 2021 в 18:04
  • Его не видно под изображением, которое является фоном. Посмотрите код пожалуйста. И никак его не вывести по оси z
    – Ruslanyo
    25 сен 2021 в 19:20
  • Снипет не воспроизводит проблему. Почитайте пожалуйста минимальный воспроизводимый пример. Не могу понять какой результат вы хотите получить
    – Greg--
    27 сен 2021 в 6:45
  • Я задаю задний фон тегом img <div class="main-block__img _bgimg"> <img src="img/main-background.jpg" alt="bgbgbf"> </div>, а градиент задаю родительскому блоку <section class="main-block">. Проблема в том, что градиент всегда под img
    – Ruslanyo
    28 сен 2021 в 8:56

1 ответ 1

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.