Как версткой на div сделать над элементом слева круг с количеством ошибок?

Кружок со счётчиком над левым верхним углом элемента делают через `position: absolute` относительно элемента-обёртки.

<div class="field">
  <input aria-describedby="errors-count" />
  <span class="badge" id="errors-count">3</span>
</div>

.field {
  position: relative;
}
.badge {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #e53935;
  color: white;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

Что важно

• position: relative у родителя — точка отсчёта для бейджа.
• translate(-50%, -50%) сдвигает центр кружка ровно в угол.
• min-width и border-radius: 999px — кружок при одной цифре и «таблетка» при двух.
• Для скринридеров текст бейджа должен быть понятным: «3 ошибки», например через aria-label или визуально скрытый текст.

Можно сделать и псевдоэлементом с content: attr(data-count), но тогда текст сложнее сделать доступным.

Коротко для собеседования

Обёртка с position: relative, бейдж с position: absolute; top: 0; left: 0; transform: translate(-50%, -50%), круг через border-radius и min-width.

Подробнее: MDN — position