Как исправить перекрывающееся абсолютное позиционирование - PullRequest
Новая
       36

Как исправить перекрывающееся абсолютное позиционирование

1 голос
/ 13 июля 2020

Как это исправить? Нужно ли указывать высоту для класса Fieldset? Кстати, я не хочу указывать высоту в Fieldset. 

.Identifier{
  display: flex; flex-direction: column;
  font-family: 'Fira Sans Regular', sans-serif;
}

.Fieldset > input{
  width: 302px; padding: 12px;
  position: absolute;
}

.Fieldset > label{
  display: inline-block;
  position: relative;
  pointer-events: none;
  top: 14px; left: 14px;
}
<form method="POST" class="Identifier">
  <div class="Fieldset">
    <input type="text" name="Username">
    <label>Username or email</label>
  </div>
  <a href="">Forgot username or email?</a>
  <button type="submit">Continue</button>
</form>

Фото здесь

1 Ответ

2 голосов
/ 14 июля 2020

Хотя вы можете сделать так, чтобы абсолютное позиционирование имело относительную точку привязки, поместив ее внутри родительского элемента с помощью position:relative, чтобы добиться эффекта перекрытия, сохраняя его выравнивание на разных размерах экрана.

Из вашего кода I подумайте, что вы пытаетесь достичь, это просто заполнитель поля.

Что можно сделать, просто используя placeholder="your text here" внутри входного тега. Что, в отличие от того, что вы попытаетесь сделать, перекрыв элемент метки с полем, вы в конечном итоге закроете текст поля, который пытается ввести любой пользователь. 

.Identifier {
  display: flex;
  flex-direction: column;
  font-family: 'Fira Sans Regular', sans-serif;
}

.Fieldset>input {
  padding: 12px;
}

.Fieldset>label {
  display: inline-block;
  position: relative;
  pointer-events: none;
  top: 14px;
  left: 14px;
}
<form method="POST" class="Identifier">
    <div class="Fieldset">
      <input type="text" name="Username" placeholder="Username or email">
  </div>
  <a href="">Forgot username or email?</a>
  <button type="submit">Continue</button>
</form>
...