Прошу помочь, не могу разобраться с позиционированием слоев.
.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>
На вложенность и названия элементов прошу не обращать внимания, хочу в дальнейшем написать для всего этого "слайдер".
Вводная информация:
background, задан к секции testimonials)::before).testi)Проблемы:
.testimonials и к .testimonials::before z-index: -2 и -1 соответственно, а для .testi 999.body. Это применяется к 1 и 2 блоку с классом .slides, к третьему же Инспектор отправляет корректно.
При этом, текст в первых двух блоках не выделяется, ощущение, что поверх первых двух блоков висит какой-то прозрачный фон...z-index у .testimonials и .testimonials::before, оставил у .testi z-index: 999..slides отображаются корректно, но h3 внутри .testi, у которого по логике самый высокий z-index, ушел под слой testimonials::before.
При этом проблем с выделением и инспектированием элементов нет, т.е. так называемой "прозрачной" заглушки нету.Скрин:
Надеюсь, я корректно изложил проблему. Спасибо!
Сборка персонального компьютера от Artline: умный выбор для современных пользователей