问题描述
因此，问题在于用户名和密码的输入字段以及登录按钮不起作用。两者都位于矩形上，矩形本身位于svg标签上。
另外，我认为问题是因为我的身体标签上有一个div的动画背景。动画有效，但是输入字段不允许输入文本，并且单击按钮时不执行任何操作。我尝试将输入字段和按钮的z-index设置为0，但是什么也没有发生，因此我将其删除。
我遇到麻烦的部分的ID为：loginButton，usernameInput和passwordInput。
*{
margin: 0;
padding: 0;
}
.homePage-background{
background: linear-gradient(to left,#8942a8,#ba382f);
width: 100%;
height: 100vh;
z-index: 3;
}
.animation{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.animation li{
position: absolute;
display: block;
list-style: none;
width: 25px;
height: 25px;
background: rgba(255,255,0.2);
animation: animate 20s linear infinite;
bottom: -150px;
}
.animation li:nth-child(1){
left: 86%;
width: 80px;
height: 80px;
animation-delay: -0s;
}
.animation li:nth-child(2){
left: 12%;
width: 30px;
height: 30px;
animation-delay: 1.5s;
animation-duration: 10s;
}
.animation li:nth-child(3){
left: 70%;
width: 70px;
height:70px;
animation-delay: 4s; /*Change this to 5.5 seconds later and see the result*/
}
@keyframes animate{
0%{
transform: translateY(0) rotate(0deg);
opacity: 1;
z-index: 2;
}
100%{
transform: translateY(-800px) rotate(360deg);
opacity: 0;
z-index: 2;
}
}
#loginTitle{
position: absolute;
color: #dddddd;
font-weight: bold;
}
#username{
position: absolute;
font-size: large;
font-weight: bold;
margin-top: 30%;
margin-left: 20%;
color: #dddddd;
}
#usernameInput{border-radius: 10px;}
#password{
position: absolute;
font-size: large;
font-weight: bold;
margin-top: 55%;
margin-left: 20%;
color: #dddddd;
}
#passwordInput{border-radius: 10px;}
#loginButton{
position: relative;
margin-left: 45%;
margin-top: 65%;
height: 40px;
width: 70px;
z-index: 0;
}
#loginButton:hover{
background-color: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZonixN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="../css/homePage.css" type="text/css">
</head>
<body>
<div class="homePage-background"> <!-- animation area-->
<svg class="container-sm" width="400" height="760" style="position:absolute; margin-left: 35%; margin-top:35px">
<rect id="loginRect" width="50%" height="100%" rx="40px" ry="40px" style="fill: cornflowerblue; stroke: pink; stroke-opacity: 0.0; stroke-width: 3px; "/>
<foreignObject height="760" width="50%">
<label id="username" for="usernameInput">UserName:
<input type="text" id="usernameInput" name="usernameInput" placeholder=" Enter your username ">
</label>
<label id="password" for="passwordInput">Password:
<input type="text" id="passwordInput" name="passwordInput" placeholder=" Enter your password">
</label>
<button type="submit" id='loginButton' value="Login" onclick="window.location.href='https://www.w3schools.com/tags/tag_button.asp';">Login</button>
</foreignObject>
</svg>
<ul class="animation"> <!-- Box area-->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>谢谢！
解决方法
有必要吗？这是z-index会提供帮助的地方。在CSS中，我标记了修改。
*{
margin: 0;
padding: 0;
}
.homePage-background{
background: linear-gradient(to left,#8942a8,#ba382f);
width: 100%;
height: 100vh;
z-index: 3;
}
.animation{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.animation li{
position: absolute;
display: block;
list-style: none;
width: 25px;
height: 25px;
background: rgba(255,255,0.2);
animation: animate 20s linear infinite;
bottom: -150px;
}
.animation li:nth-child(1){
left: 86%;
width: 80px;
height: 80px;
animation-delay: -0s;
}
.animation li:nth-child(2){
left: 12%;
width: 30px;
height: 30px;
animation-delay: 1.5s;
animation-duration: 10s;
}
.animation li:nth-child(3){
left: 70%;
width: 70px;
height:70px;
animation-delay: 4s; /*Change this to 5.5 seconds later and see the result*/
}
/*add this it*/
.container-sm {
z-index: 9999;
}
/*---------------*/
@keyframes animate{
0%{
transform: translateY(0) rotate(0deg);
opacity: 1;
z-index: 2;
}
100%{
transform: translateY(-800px) rotate(360deg);
opacity: 0;
z-index: 2;
}
}
#loginTitle{
position: absolute;
color: #dddddd;
font-weight: bold;
}
#username{
position: absolute;
font-size: large;
font-weight: bold;
margin-top: 30%;
margin-left: 20%;
color: #dddddd;
}
#usernameInput{border-radius: 10px;}
#password{
position: absolute;
font-size: large;
font-weight: bold;
margin-top: 55%;
margin-left: 20%;
color: #dddddd;
}
#passwordInput{border-radius: 10px;}
#loginButton{
position: relative;
margin-left: 45%;
margin-top: 65%;
height: 40px;
width: 70px;
z-index: 0;
}
#loginButton:hover{
background-color: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="../css/homePage.css" type="text/css">
</head>
<body>
<div class="homePage-background"> <!-- animation area-->
<svg class="container-sm" width="400" height="760" style="position:absolute; margin-left: 35%; margin-top:35px">
<rect id="loginRect" width="50%" height="100%" rx="40px" ry="40px" style="fill: cornflowerblue; stroke: pink; stroke-opacity: 0.0; stroke-width: 3px; "/>
<foreignObject height="760" width="50%">
<label id="username" for="usernameInput">UserName:
<input type="text" id="usernameInput" name="usernameInput" placeholder=" Enter your username ">
</label>
<label id="password" for="passwordInput">Password:
<input type="text" id="passwordInput" name="passwordInput" placeholder=" Enter your password">
</label>
<button type="submit" id='loginButton' value="Login" onclick="window.location.href='https://www.w3schools.com/tags/tag_button.asp';">Login</button>
</foreignObject>
</svg>
<ul class="animation"> <!-- box area-->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>,
您当前使用的动画有一个z-index: 3
您应该向容器添加更高的z-index值（无论您觉得方便如何，都应大于等于4）。
.container-sm {
z-index: 4;
}