I was making a login form with animations. If there is only one input field, it works perfect but when I add other input fields, they overlap with each other and the animations don't work properly. The submit button and checkbox gets hidden.

<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>

Here is the jsfiddle: https://jsfiddle.net/j2dteaz0/1/

Any help is appreciated. Thanks

CodePudding user response：

Absolute positioning require to use a relative positioning on a parent element.

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

Edited Fiddle

edit 1 CSS rules for specified input type only

CodePudding user response：

Change the following CSS property as this;

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