Правильно разметить подсказку о неправильно заполненной форме

Question

.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>

Answer 1

Без стилей и с этим отрывком кода, сложно сказать, наверняка почему у вас так отображается. Но, если вы уберёте position absolute и просто добавить display block, то ошибки должны появлятся в том месте, где вы ожижаете. Если это не поможет, то нужно смотреть на полноценно воспроизводимый пример. Ниже слегка модифицированный ваш код:

.error { 
  display: block;
  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">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">Error</span>
                </div>
                <div class="popup__input-warapper">
                    <input type="email" name="about" id="about2" class="popup__formfield-input popup__formfield-input_job"
                        placeholder="Email" minlength="2" maxlength="40" required />
                        <span class="error">Error</span>
                </div>
                <button type="submit" class="popup__save-button">Отправить</button>
            </form>
        </div>
    </div>

БЛОГ НА HUSL

Правильно разметить подсказку о неправильно заполненной форме

Ответы (1 шт):