CSS子元素无法识别父元素以正确对齐答案

【问题标题】：CSS child element not recognizing parent for proper alignmentCSS子元素无法识别父元素以正确对齐
【发布时间】：2021-01-24 17:31:45
【问题描述】：

我正在尝试使用绝对定位将标签文本与其对应的输入字段对齐。但是，标签没有将我的 input-div 识别为其父级，并且似乎将标签文本相对于外部 login-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;
}

【问题讨论】：

标签： html css

【解决方案1】：

使用绝对定位，您已经摆脱了父框。将position: relative; 添加到input-div 元素，或将label 更改为position relative; 可以帮助您定位与input-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;
}

【讨论】：

我确实将 input-div 位置设置为 relative，但我将其命名为 login-div。这有助于追踪，谢谢！

【解决方案2】：

类.input-div 应该是{ position: relative; } 否则它将定位在最近的父级 {position:relative}

它还应该有 width 等于 .form, 等于 .login-div

【讨论】：

【解决方案3】：

尝试使用transform属性

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

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

【讨论】：