Как выставить правильно height в position: absolute?

Question

[Norwood]

Добрый день. Есть проблемка. Точки сделал position: absolute. Но при сжатии, они вываливаются за блок. Как правильно сделать, что бы они отталкивали его?

<div class="skill__card">
        <div class="skill__card-img">
          <img src="/assets/img/skill/skill-icon1.png" alt="">
        </div>
        <div class="skill__card-number">12,458+</div>
        <div class="skill__card-text">Projects Completed</div>
      </div>
    </div>

.skill__card {
  box-sizing: border-box;
  z-index: 1;
  color: $colorWhite;
  position: relative;
  flex: 0 1 25%;
  min-width: 160px;
  text-align: center;
  margin-top: 10px;
  &::after {
    position: absolute;
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #ad7aee;
    border: 2px solid #ad7aee;
    box-shadow: inset 0 0 0 5px rgba(38, 39, 50, .85);
    top: 120%;
    left: 44%;
  }
  &:not(:last-child){
    padding-right: 5px;
  }
}

Comments

[Ankhena]

А вы можете внятно объяснить, зачем они абсолютом?

И всё встанет на свои места.

[Norwood]

Ankhena, только ради позиционирования

[Ankhena]

Norwood, так перестаньте делать его абсолютом. Ему и в потоке не плохо.
4 блочных элемента идут друг под другом.
- псевдо с иконкой
- параграф с числом
- параграф с текстом
- псевдо с точкой

Зачем тут абсолют?

Можете вообще фоном к skill__card сделать.

[Norwood]

понял, спасибо!

Answer 1

[Andrew]

Привет! Тут есть несколько вариантов как минимум!

Самый простой это объединить график и точку в одну png. Если забить на оптимизацию.
Второй вариант эту точку сделать как обычный span без псевдоэлементов. И cпомощью flexbox или блочной верстке (как вам нравится) сделать их по вертикали.

Но скорей всего не в этом проблема. Как вы сделали блоки тоже не понятно. У вас явно где-то выше есть проблема, так как нарушается высота. Посмотрите выходит ли ваша точка или какой-то элемент за границу блока. Это вам даст подсказку.

Comments

[Norwood]

Добрый! Насколько я знаю, декоративные элементы принято делать именно через псевдоэлементы т.к. они не несут никакой смысловой нагрузки. Так как Вы рекомендуете через обычный элемент- это самый простой способ, но не самый правильный. По поводу вышестоящих блоков- они сделаны правильно, всё стоит на своих местах и не выпадает за пределы блоков. Единственная проблема- это псевдоэлементу задать нужные размеры т.к. он выпадает из потока (если я конечно правильно всё понимаю).

[Andrew]

Norwood привет! Все правильно вы сказали. Что данные элементы делаются так. Но всегда есть исключения. Выше писал про оптимизацию. Или же вы можете задать высоту своему блоку в котором иконки. Как вы выше написали.

[Norwood]

Andrew, я решил вопрос без позиционирования. Задал inline-block и всё работает как нужно. Спасибо за помощь!