0

Подскажите пожалуйста, что не так делаю

.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, не получаться. Буду очень благодарен

1
  • Пожалуйста, исправьте вопрос, чтобы он отражал конкретную проблему с достаточным количеством деталей для возможности дать адекватный ответ. Commented 21 апр. 2022 в 21:24

1 ответ 1

0

Т.к. у .block-wrapper есть родитель .container такого же размера, то я разместил бы блок .block-wrapper__img-block-wrapper1 рядом с .block-wrapper.
Далее выставил бы .block-wrapper {z-index: 2} (т.к. он должен быть над), а для .block-wrapper__img-block-wrapper1 {z-index: 1} (под), так же .container {position: relative}, чтобы блок с абсолютом никуда "не убежал".

.container {
  position: relative;
}

.section-experts {
  position: relative;
  background-color: #FAFBFD;
  padding-top: 92px;
  padding-bottom: 116px;
}

.block-wrapper {
  position: relative;
  z-index: 2;
  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>
    <div class="block-wrapper__img-block-wrapper1"></div>
  </div>
</section>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.