html - HTML按钮不能重叠css背景
问题描述
我想在云 bakground 的顶部显示登录表单。我从此链接复制云背景脚本。在 css .cloud 中,我将位置从相对更改为绝对,但登录表单不会在云顶部移动。
这是我在登录表单之前粘贴云背景脚本的代码。
* {
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>
如何在云背景顶部显示登录表单?
解决方案
改变表格的位置:)
像这样的东西
#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>
推荐阅读
- r - GPU上的foreach多并行
- html - 引导程序 4:列 (td) 中的 d-lg-flex
- php - MailChimp API 在 V3.0 PHP Curl 中响应 404
- php - 如何创建保留在注册表单中的持久点
- javascript - 如何为对象数组中的特定属性分配 Object.assign()
- javascript - Realm 在 React native 上不返回异常
- javascript - 禁用具有不同 ID 的多个表单的更短方法
- php - 使用 wkhtmltopdf 将甘特图打印成 pdf
- javascript - 如何将下拉选择的值传递给另一个下拉列表
- hive - 一个查询中的两个函数在 Hive 中给出错误