.error {
position: absolute;
top: 40px;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 15px;
color: #f00;
}
Пытаюсь правильно реализовать работу попапа. Использую форму. Хочу реализовать всплытие ошибок под каждым инпутом. Реализовать получилось, но есть проблема. В форме три инпута, если пользователь ввел не правильно символы, то под инпутом появляется подсказка. Под первым и вторым инпутом появляется правильно, а при заполнении третьего ошибка появляется не ПОД, а НАД. Подскажите, как исправить
<div class="popup popup_reduction-window">
<div class="popup__container popup__container_profile">
<h2 class="popup__title">Обсудить проект</h2>
<button type="button" class="popup__close-button"></button>
<form class="popup__formfield popup__formfield_profile" name="name" novalidate autocomplete="off">
<div class="popup__input-warapper">
<input id="name-input" type="text" name="name-input"
class="popup__formfield-input popup__formfield-input_name" placeholder="Имя" minlength="2"
maxlength="40" required />
<span id="name-input-error" class="error"></span>
</div>
<div class="popup__input-warapper">
<input type="tel" name="about" id="about" pattern="([\+]*[7-8]{1}\s?[\(]*9[0-9]{2}[\)]*\s?\d{3}[-]*\d{2}[-]*\d{2})" class="popup__formfield-input popup__formfield-input_job"
placeholder="Телефон" minlength="2" maxlength="20" required />
<span id="about-error" class="error"></span>
</div>
<div class="popup__input-warapper">
<input type="email" name="about" id="about" class="popup__formfield-input popup__formfield-input_job"
placeholder="Email" minlength="2" maxlength="40" required />
<span class="error"></span>
</div>
<button type="submit" class="popup__save-button">Отправить</button>
</form>
</div>
</div>