CSS子元素无法识别正确对齐的父元素

Question

我正在尝试使用绝对定位将标签文本与其相应的输入字段对齐。然而，标签并没有将我的输入div识别为其父级，而似乎是相对于外部登录div定位标签文本。

HTML：

<div class="login-div">
        <form action="" class="form">
            <h2>Login</h2>
            <div class="input-div">
                <input type="text" name="loginName" id="loginName" required>
                <label for="loginName">Username</label>
            </div>
            <div class="input-div">
                <input type="password" name="loginPassword" id="loginPassword" required>
                <label for="loginPassword">Password</label>
            </div>
            <input type="submit" value="Login" class="submit-btn">
            <a href="#forgot-pw" class="forgot-pw">Forgot your password?</a>
            <p>New member? <a href="#register" class="register">Sign up now!</a></p>
        </form>
</div>

CSS：

.form .input-div label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 1rem;
  pointer-events: none;
}

登录名和密码塞进表单的一角，而不是输入字段

Answer 1

尝试使用变换属性

顶部和左侧属性依赖于父级的位置（相对于它、绝对或静态）。翻译不受该设置的影响。当元素具有位置时，翻译转换与应用顶部和左侧“相同”：相对

form .input-div label {
  position: absolute;
  transform: translate(50%, 100%);
  padding: 10px 0;
  font-size: 1rem;
  pointer-events: none;
}

Answer 2

类<代码>。输入div应为{code>{位置：相对；} 否则，它将被放置在距离最近的父级{位置：相对}

它的宽度也应该等于。形式，等于。登录div

Answer 3

使用绝对定位，您已经摆脱了父框。添加<代码>位置：相对 到输入div元素，或将标签更改为相对位置 可以帮助您相对于输入div定位标签。

.form .input-div {
  position: relative;
}

.form .input-div label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;  /* Set width to something appropriate */
  height: 30px;  /* Set this value to something appropriate */
  display: table; /* Optional. May help set an organic line width */
  padding: 10px 0;
  font-size: 1rem;
  pointer-events: none;
}