Позиционирование слоёв в CSS

99
14 февраля 2021, 08:30

Прошу помочь, не могу разобраться с позиционированием слоев.

.testimonials { 
  background-color: #fff; 
  background: url('http://via.placeholder.com/250x250/33ff99/555555?text=testimonials') no-repeat; 
  background-size: cover; 
  height: 100%; 
  min-height: 450px; 
  position: relative; 
} 
 
.testi { 
  z-index: 999; 
  padding: 50px 0; 
} 
 
.testi h3 { 
  color: #ddc372; 
} 
 
.testi h3::after { 
  content: ''; 
  width: 160px; 
  height: 3px; 
  background: url('http://via.placeholder.com/250x250/00ffff/555555?text=testi-h3::after') no-repeat; 
  text-align: center; 
} 
 
.testimonials::before { 
  content: ''; 
  left: 0; 
  position: absolute; 
  top: 0; 
  width: 100%; 
  min-height: 450px; 
  height: 100%; 
  background-color: #010f16; 
  opacity: .6; 
  padding: 0; 
} 
 
.wrapper-testimonials .slides { 
  display: block; 
  position: relative; 
  background-color: #fff; 
  margin: 15px; 
  padding: 40px 10px; 
  overflow: hidden; 
  z-index: 999; 
} 
 
.wrapper-testimonials h5 { 
  color: #000; 
} 
 
.wrapper-testimonials h5::after { 
  content: '_________'; 
  display: block; 
  color: #000; 
  margin-top: 10px auto 10px auto; 
}
<section class="container-fluid testimonials"> 
  <div class="container testi"> 
    <h3>Отзывы о Нас</h3> 
    <div class="d-flex flex-column flex-md-row text-center wrapper-testimonials"> 
      <div class="flex-fill slides"> 
        <h5>Тимур Жумашев</h5> 
        <p>Заказывал чистку дивана и двух стульев. Реята приехали оперативно, почистили "на совесть", а также проконсультировали в части дальнейшего ухода за моей мебелью</p> 
      </div> 
      <div class="flex-fill slides"> 
        <h5>Тимур Жумашев</h5> 
        <p>Заказывал чистку дивана и двух стульев. Реята приехали оперативно, почистили "на совесть", а также проконсультировали в части дальнейшего ухода за моей мебелью</p> 
      </div> 
      <div class="flex-fill slides"> 
        <h5>Тимур Жумашев</h5> 
        <p>Заказывал чистку дивана и двух стульев. Реята приехали оперативно, почистили "на совесть", а также проконсультировали в части дальнейшего ухода за моей мебелью</p> 
      </div> 
    </div> 
  </div> 
</section>

На вложенность и названия элементов прошу не обращать внимания, хочу в дальнейшем написать для всего этого "слайдер".

Вводная информация:

  1. Есть фон (background, задан к секции testimonials)
  2. Есть прозрачный слой (задан через псевдоэлемент ::before)
  3. Есть блок с основным контентом (.testi)

Проблемы:

  1. Пытался задать к .testimonials и к .testimonials::before z-index: -2 и -1 соответственно, а для .testi 999.
    Результат визуально всё в порядке, но, при ПКМ - Исследовать элемент к первому блоку slides - кидает на тег body. Это применяется к 1 и 2 блоку с классом .slides, к третьему же Инспектор отправляет корректно. При этом, текст в первых двух блоках не выделяется, ощущение, что поверх первых двух блоков висит какой-то прозрачный фон...
  2. Убрал z-index у .testimonials и .testimonials::before, оставил у .testi z-index: 999.
    Результат блоки с классом .slides отображаются корректно, но h3 внутри .testi, у которого по логике самый высокий z-index, ушел под слой testimonials::before. При этом проблем с выделением и инспектированием элементов нет, т.е. так называемой "прозрачной" заглушки нету.

Скрин:

Надеюсь, я корректно изложил проблему. Спасибо!

READ ALSO
Проблема при создании футера сайта HTML CSS

Проблема при создании футера сайта HTML CSS

Вроде правильно пишу код, по гайду, а футер выглядит не так как надоИ еще не могу номер телефона по центру сделать (на номер внимания не обращайте,...

96
Вертикальное позиционирование SVG-элемента поверх и под другие элементы

Вертикальное позиционирование SVG-элемента поверх и под другие элементы

Нужно, чтобы элемент rect1 был расположен под rect2, но rect3 (синий) располагался над rect2 (зелёный) и под rect1 (красный)

96
WPF Как привязать стиль из Windows10?

WPF Как привязать стиль из Windows10?

Только вчера сел изучать WPF, так что прошу не кидаться "камнями в мой огород"

99