HTML button can not overlap css background - html

Question

I want to show login form on the top of cloud bakground. I copy cloud backgroud script from this link . In css .cloud I change position from relative to absolute but login form not move on the top of cloud.
This is my code I paste cloud backgroud script before login form.
* {
margin: 0;
padding: 0;
}
body {
/*To hide the horizontal scroller appearing during the animation*/
overflow: hidden;
}
#clouds {
padding: 100px 0;
#background: #c9dbe9;
#background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
#background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
#background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
/*Time to finalise the cloud shape*/
.cloud {
width: 200px;
height: 60px;
background: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: absolute;
}
.cloud:before,
.cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px;
height: 80px;
position: absolute;
top: -15px;
left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.cloud:after {
width: 120px;
height: 120px;
top: -55px;
left: auto;
right: 15px;
}
/*Time to animate*/
.x1 {
-webkit-animation: moveclouds 15s linear infinite;
-moz-animation: moveclouds 15s linear infinite;
-o-animation: moveclouds 15s linear infinite;
}
/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
/*opacity proportional to the size*/
/*Speed will also be proportional to the size and opacity*/
/*More the speed. Less the time in 's' = seconds*/
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s linear infinite;
-o-animation: moveclouds 25s linear infinite;
}
.x3 {
left: -250px;
top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
/*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
.x4 {
left: 470px;
top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75;
/*opacity proportional to the size*/
-webkit-animation: moveclouds 18s linear infinite;
-moz-animation: moveclouds 18s linear infinite;
-o-animation: moveclouds 18s linear infinite;
}
.x5 {
left: -150px;
top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
/*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
#-webkit-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
#-moz-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
#-o-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
<div id="clouds">
<div class="cloud x1"></div>
<!-- Time for multiple clouds to dance around -->
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>
<!-- ************ This is my login form ************ -->
<div id="authloginContainer">
<div class="authloginTabContent" authpluginarray="1,2,3" modelnum="0">
<div class="authmodel authmodel_0 blueColorContainer">
<p> </p>
<div class="marbom6 usernameContainer">
<p class="pContainer authinputwidth">
<label></label>
<input id="username" value="Account" emptytip="Account" type="text" class="frm-input"></p>
</div>
<div class="marbom6 passwordContainer" style="margin-bottom: 0;">
<p class="center pContainer authinputwidth">
<label></label>
<input id="password" value="Password" emptytip="Password" type="text" class="frm-input"></p>
</div>
<div class="rmbPwdContainer" style="display: none;margin: 0 auto;width: 270px;">
<p class="center yaHei" style="text-align:left;padding-left: 24px;">
<input id="rememberPwd" name="rememberPwd" type="checkbox" savetime="14" onclick="selectRememberPwd()" class="remPwdInp">Remember password</p>
</div>
<div class="validcodeContainer authenticationcodeContainer" style="margin-top: 10px; display: block;">
<p class="pContainer authinputwidth">
<input id="validCode" value="Verification code" type="text" class="frm-input" onkeydown="subLoginCheck()" data-type="" style="" emptytip="Verification code" validcodecomplex="2" validcodelength="4"></p>
</div>
<p style="margin-top: 5px; text-align: center">
<input id="loginBtn" type="button" value="Log In" class="frm-button borderRadius4" style="background-color: #95F4FF; border-color: #95F4FF;" onclick="login()"></p>
</p>
<p> </p>
</div>
</div>
</div>
How to show login form on the top of cloud background ?

Answer 1

Change the position of the form :)
Something like this
#authloginContainer {
position: fixed;
width: 200px;
top: 50px;
left: calc(50% - 100px);
}
* {
margin: 0;
padding: 0;
}
body {
/*To hide the horizontal scroller appearing during the animation*/
overflow: hidden;
}
#clouds {
padding: 100px 0;
background: #c9dbe9;
background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
#authloginContainer {
position: fixed;
width: 200px;
top: 50px;
left: calc(50% - 100px);
}
/*Time to finalise the cloud shape*/
.cloud {
width: 200px;
height: 60px;
background: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: absolute;
}
.cloud:before,
.cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px;
height: 80px;
position: absolute;
top: -15px;
left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.cloud:after {
width: 120px;
height: 120px;
top: -55px;
left: auto;
right: 15px;
}
/*Time to animate*/
.x1 {
-webkit-animation: moveclouds 15s linear infinite;
-moz-animation: moveclouds 15s linear infinite;
-o-animation: moveclouds 15s linear infinite;
}
/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
/*opacity proportional to the size*/
/*Speed will also be proportional to the size and opacity*/
/*More the speed. Less the time in 's' = seconds*/
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s linear infinite;
-o-animation: moveclouds 25s linear infinite;
}
.x3 {
left: -250px;
top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
/*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
.x4 {
left: 470px;
top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75;
/*opacity proportional to the size*/
-webkit-animation: moveclouds 18s linear infinite;
-moz-animation: moveclouds 18s linear infinite;
-o-animation: moveclouds 18s linear infinite;
}
.x5 {
left: -150px;
top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
/*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
#-webkit-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
#-moz-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
#-o-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
<div id="clouds">
<div class="cloud x1"></div>
<!-- Time for multiple clouds to dance around -->
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>
<!-- ************ This is my login form ************ -->
<div id="authloginContainer">
<div class="authloginTabContent" authpluginarray="1,2,3" modelnum="0">
<div class="authmodel authmodel_0 blueColorContainer">
<p> </p>
<div class="marbom6 usernameContainer">
<p class="pContainer authinputwidth">
<label></label>
<input id="username" value="Account" emptytip="Account" type="text" class="frm-input"></p>
</div>
<div class="marbom6 passwordContainer" style="margin-bottom: 0;">
<p class="center pContainer authinputwidth">
<label></label>
<input id="password" value="Password" emptytip="Password" type="text" class="frm-input"></p>
</div>
<div class="rmbPwdContainer" style="display: none;margin: 0 auto;width: 270px;">
<p class="center yaHei" style="text-align:left;padding-left: 24px;">
<input id="rememberPwd" name="rememberPwd" type="checkbox" savetime="14" onclick="selectRememberPwd()" class="remPwdInp">Remember password</p>
</div>
<div class="validcodeContainer authenticationcodeContainer" style="margin-top: 10px; display: block;">
<p class="pContainer authinputwidth">
<input id="validCode" value="Verification code" type="text" class="frm-input" onkeydown="subLoginCheck()" data-type="" style="" emptytip="Verification code" validcodecomplex="2" validcodelength="4"></p>
</div>
<p style="margin-top: 5px; text-align: center">
<input id="loginBtn" type="button" value="Log In" class="frm-button borderRadius4" style="background-color: #95F4FF; border-color: #95F4FF;" onclick="login()"></p>
</p>
<p> </p>
</div>
</div>
</div>