Прошу помочь, не могу разобраться с позиционированием слоев.
.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
.
При этом проблем с выделением и инспектированием элементов нет, т.е. так называемой "прозрачной" заглушки нету.Скрин:
Надеюсь, я корректно изложил проблему. Спасибо!
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Вроде правильно пишу код, по гайду, а футер выглядит не так как надоИ еще не могу номер телефона по центру сделать (на номер внимания не обращайте,...
Нужно, чтобы элемент rect1 был расположен под rect2, но rect3 (синий) располагался над rect2 (зелёный) и под rect1 (красный)
Только вчера сел изучать WPF, так что прошу не кидаться "камнями в мой огород"