表单输入中的所有内容要么重叠要么不显示

Question

我正在制作一个带有动画的登录表单。如果只有一个输入字段，效果很好，但当我添加其他输入字段时，它们会相互重叠，动画无法正常工作。提交按钮和复选框被隐藏。

<div class="form">
        <div class="inputs">
            <input type="text" autocomplete="off" name="name" placeholder=" " required>
            <label for="name" class="label-name">
                <span class="content-name">username</span>
            </label>
            <input type="password" name="name" placeholder=" " required>
            <label for="name" class="label-name">
                <span class="content-name">password</span>
            </label>
            <div class="hide">
                <input type="checkbox" onclick="myFunction()">Show Password
            </div>
            <button>Login</button>
        </div>
</div>

这是 jsfiddle：https://jsfiddle.net/j2dteaz0/1/

感谢任何帮助。谢谢

Answer 1

绝对定位需要在父元素上使用相对定位。

.inputs > div {
  position: relative;
}
.inputs input[type="text"], .inputs input[type="password"]{
  ...

Edited Fiddle

编辑 1 CSS 仅指定输入类型的规则

Answer 2

把下面的CSS属性改成这样；

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

表单输入中的所有内容要么重叠要么不显示

Everything inside form input is either overlapping or not showing

html

css

forms

flexbox

position