Can't figure out z-index?

Question

HTML

Faced with the use of z-index and swam .. In general, you need to do it like on the screen . Now I have it like this .
Here is the 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>

Here is kss

#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 {

}

Help))

Answer 1

Remove images from service-block