时间戳

首页 > 解决方案 > HTML 按钮未出现/元素相互堆叠

html - HTML 按钮未出现/元素相互堆叠

问题描述

我遵循了一个表格教程（使其看起来更专业）并且我仔细地遵循了每一步（我f#cked了一些东西，我找不到它）现在我所有的“领域”都是相互堆叠。我有一个 php 页面，我在上面制作表格，然后如果所有信息都填写完毕并且用户按下“提交”按钮，那么它应该将其发送到我和他们的电子邮件。它有效，但是当我开始遵循本教程/指南时，按钮消失了，当我试图在页面上找到它时，我看不到它/单击它或任何东西。通过一些技巧，我可以看到按钮的轮廓，但看不到实际的按钮（opera 中有一个功能，我认为许多其他浏览器在浏览页面上的元素时，如果您在源代码中单击其中一个元素，它会突出显示它在页面上）。

<!DOCTYPE html>
<html>
<head>
<title>Enroll</title>
<link rel="icon" href="mail.png">
</head>
<style>

body{
background-color: white;
font-family: sans-serif;
justify-content:space-around;
align-items:center;
flex-direction:column;
height:100%;;
}

.form{
overflow:hidden;
width:75%;
position:absolute;
left:10%;
transition: all 0.3 ease;
height:50px;
}

.form label{
position:absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
pointer-events: none;
border-bottom: 1px solid black;
transition: 0.3 ease;
}

.form label::after{
    content: "";
    position:absolute;
    left:0px;
    buttom:0px;
    height:100%;
    width:100%;
    border-bottom: 3px solid #5fa8d3;
    transform translateX(-100%);
}

.button{
width:400px;
height:30px;
background-color:blue;
}

.form input{
width:100%;
height:100%;
color: #595f6e;
padding-top: 20px;
border: none;
transition: 0.3s ease;
}

.content-name {
position:absolute;
bottom:5px;
left:0px;
transition: all 0.3 ease;
}

.form input:focus + .label-name .content-name,
.form input:valid + .label-name .content-name {
 transform: translateY(-150%);
 font-size: 14px;
 color: #5fa8d3;
}

.form input:focus{
    
}
</style>

<body>
<div align="center"> 
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <form class="form" action="" method="post">
    
    <input type="text" name="email" required />
    <label for="email" class="label-name">
        <span class="content-name">Email</span>
    </label>
    <br>
    
    <input type="text" name="first_name" required />
    <label for="first_name" class="label-name">
        <span class="content-name">First Name</span>
    </label>
    <br>
    
    
    <input type="text" name="last_name">
    <label for="last_name" class="label-name">
        <span class="content-name">Last Name</span>
    </label>
    <br>
    
    
    <br>
          <input style="color:blue;" onClick="return empty()" type="submit" name="submit" value="Submit"></br>
    </form>
</div>
    
</body>
</html>

标签： htmlcss

解决方案

它们都是堆叠的，因为您position:absolute在<label>没有正确父参考的情况下使用它们应该定位的位置。尝试用下面的示例包装它们，<div>然后添加position:relativediv

<!DOCTYPE html>
<html>
<head>
<title>Enroll</title>
<link rel="icon" href="mail.png">
</head>
<style>

body{
background-color: white;
font-family: sans-serif;
justify-content:space-around;
align-items:center;
flex-direction:column;
height:100%;;
}

.form{
overflow:hidden;
width:75%;
position:absolute;
left:10%;
transition: all 0.3 ease;
height:50px;
display: flex;
}
.form .field {
position: relative;
}

.form label{
position:absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
pointer-events: none;
border-bottom: 1px solid black;
transition: 0.3 ease;
}

.form label::after{
    content: "";
    position:absolute;
    left:0px;
    buttom:0px;
    height:100%;
    width:100%;
    border-bottom: 3px solid #5fa8d3;
    transform translateX(-100%);
}

.button{
width:400px;
height:30px;
background-color:blue;
}

.form input{
width:100%;
height:100%;
color: #595f6e;
padding-top: 20px;
border: none;
transition: 0.3s ease;
}

.content-name {
position:absolute;
bottom:5px;
left:0px;
transition: all 0.3 ease;
}

.form input:focus + .label-name .content-name,
.form input:valid + .label-name .content-name {
 transform: translateY(-150%);
 font-size: 14px;
 color: #5fa8d3;
}

.form input:focus{
    
}
</style>

<body>
<div align="center"> 
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <form class="form" action="" method="post">
    <div class="field">
        <input type="text" name="email" required />
        <label for="email" class="label-name">
            <span class="content-name">Email</span>
        </label>
    </div>
    <br>
    <div class="field">
        <input type="text" name="first_name" required />
        <label for="first_name" class="label-name">
            <span class="content-name">First Name</span>
        </label>
    </div>
    <br>
    
    <div class="field">
        <input type="text" name="last_name" />
        <label for="last_name" class="label-name">
            <span class="content-name">Last Name</span>
        </label>
    </div>
    <br>
    
    
    <br>
          <input style="color:blue;" onClick="return empty()" type="submit" name="submit" value="Submit"></br>
    </form>
</div>
    
</body>
</html>

推荐阅读