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