Подскажите пожалуйста, что не так делаю
.section-experts {
position: relative;
background-color: #FAFBFD;
padding-top: 92px;
padding-bottom: 116px;
}
.block-wrapper {
position: relative;
z-index: 4;
display: flex;
align-items: center;
justify-content: space-between;
width: 654px;
padding: 25px 57px 20px 67px;
margin: 0 auto;
background-color: #fff;
box-shadow: 0px 2px 24px rgba(88, 126, 236, 0.15);
border-radius: 16px;
}
.column-wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.column-wrapper__span {
display: block;
margin-bottom: 5px;
@include fonts (36px, 700, 1.19);
color: #EC5863;
}
.columnn-wrapper__text {
@include fonts (11px, 700, 1.18);
text-transform: uppercase;
color: $text-color;
letter-spacing: 0.37em;
}
.block-wrapper__img-block-wrapper1 {
position: absolute;
z-index: -1;
width: 66px;
height: 66px;
background: #EC5863;
border-radius: 16px;
bottom: 0;
left: 0;
transform: rotate(30deg);
}
<section class="section-experts">
<div class="container">
<div class="block-wrapper">
<div class="column-wrapper">
<span class="column-wrapper__span">2m</span>
<p class="columnn-wrapper__text">Users</p>
</div>
<div class="column-wrapper">
<span class="column-wrapper__span">78</span>
<p class="columnn-wrapper__text">Countries</p>
</div>
<div class="column-wrapper">
<span class="column-wrapper__span">10,000+</span>
<p class="columnn-wrapper__text">Medical experts</p>
</div>
<div class="block-wrapper__img-block-wrapper1"></div>
</div>
</div>
</section>
Мне нужно, что бы block-wrapper__img-block-wrapper1
был под block-wrapper
, а не над ним. Помогите пожалуйста решить данную проблему. Как только не побывал через z-index
, не получаться. Буду очень благодарен