输入和标签不会溢出

Question

我正在尝试跟踪视频以在输入和标签上制作动画。我今天已经在学校做过一次，但是现在看来似乎不起作用。

基本上，我试图在“输入”中获取标签，并且输入也是div的完整大小。好吧，当我在标签上使用pos绝对值时，它以某种方式超出了“ form” div的范围，而IDK为何如此。

.register {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}

.form {
  position: relative;
  width: 50%;
  height: 50px;
}

.form input {
  position: relative;
  height: 100%;
  width: 100%;
  color: white;
  border: none;
  padding-top: 20px;
}

.form label {
  position: absolute;
  bottom: 0px;
}

<div class="register">
  <h1>Register</h1>
  <div class="form">
    <input type="text" name="firstN" autocomplete="off" required>
    <label for="firstN"><span>Name</span></label>
  </div>
</div>

Answer 1

像这样更改css代码：

  .form label {
   position: absolute;
   left:15px;
   top:15px;
 }

绝对pos时，您也需要设置left或top。

.register {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}
.form {
    position: relative;
    width: 50%;
    height: 50px;
}
.form input {
    position: relative;
    height: 100%;
    width: 100%;
    color: white;
    border: none;
    padding-top: 20px;
    background-color:gray;
}
.form label {
    position: absolute;
  
    left:15px;
    top:25px;
   
}

<div class="register">
  <h1>Register</h1>
  <div class="form">
    <input type="text" name="firstN" autocomplete="off" required>
    <label for="firstN"><span>Name</span></label>
  </div>
</div>

Answer 2

最好使用插入的placeholder属性：

<input placeholder="Name">

或在CSS中写更多行：

label{
    position: absolute;
    top:0;
    left:0;
}

.register {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}

.form {
  position: relative;
  width: 50%;
  height: 50px;
}

.form input {
  position: relative;
  height: 100%;
  width: 100%;
  color: white;
  border: none;
  padding-top: 20px;
}

.form label {
  position: absolute;
  top:0;
  left:0;
}

<div class="register">
  <h1>Register</h1>
  <div class="form">
    <input type="text" name="firstN" autocomplete="off" required>
    <label for="firstN"><span>Name</span></label>
  </div>
</div>