Столкнулся с применением z-index и поплыл.. В общем нужно сделать как на скрине
У меня сейчас вот так
.
Вот html
<div class="row text-center">
<div class="col-xl-12">
<div class="service-block service-block1 text-center">
<img src="img/first_circle.png" alt="Фото" class="circle-item circle-item1">
<img src="img/second_circle.png" alt="Фото" class="circle-item circle-item2">
<img src="img/third-circle.png" alt="Фото" class="circle-item circle-item3">
<h3 class="servie-block__title">
Мечтаете о доме на Солнечном берегу?
</h3>
<p class="service-block__text service-block__text1">
Или хотите выгодно инвестировать в заграничную недвижимость? В любом случае - подходящий вариант уже ждет Вас! Большой выбор объектов жилой и коммерческой недвижимости и профессиональный сервис позволит провести сделку с удовольствием и получить нужный результат
</p>
Вот ксс
#services {
padding: 100px 0;
background: url(../img/city.jpg) no-repeat top / cover;
}
.services-title {
margin-bottom: 130px;
}
.service-block {
width: 770px;
background-color: #f4f4f4;
margin: 0 auto;
border-radius: 3px;
box-shadow: 2px 2px 2px rgba(0,0,0,15%);
padding-bottom: 45px;
}
.servie-block__title {
font-size: 20px;
margin-bottom: 14px;
text-transform: uppercase;
}
.service-block__text1 {
max-width: 685px;
margin: 0 auto;
}
.service-block__text2 {
max-width: 730px;
margin: 0 auto;
}
.service-block1 {
padding-top: 65px;
margin-bottom: 8px;
position: relative;
z-index: 10;
}
.service-block2 {
padding-top: 45px;
}
.circle-item {
position: absolute;
}
.circle-item1 {
top: -128px;
left: 38%;
z-index: 5;
}
.circle-item2 {
top: -100px;
z-index: 2;
}
.circle-item3 {
}
Помогайте))
Средний
