如何阻止我的表格重叠我的头。

<?php
// Start the session
session_start();
?>
<html>
    <head>
        <title>Student Registeration</title>
        <link rel="stylesheet" src="text/css" >
        <style>
    .login-box
    {
        width:280px;
        position:relative;
        top:30%;
        left:50%;
        transform: translate(-50%,-50%);
        color:black;    
    }
     h1
     {
         margin: 0; 
         float:left;
         font-size:38px;
         border-bottom: 6px solid gold;
         margin-bottom: 40px;
         padding:0 0 20px;
         text-align:center;
     }
    .login-box p
     {
         margin: 0;
         padding: 0;
         font-size: 18px;   
    }
    .login-box input
    {
        width: 100%;
        overflow: hidden;
        margin-bottom: 20px;
        margin: 8px 0;
        padding:9px 0;  
    }
    .login-box input\[type="text"\], input\[type="password"\], input\[type="email"\]
     {
         border: none;
         outline: none;
         border-bottom: 1px solid gold;
         background: none;
         color:gold;
         font-size: 16px;
         width:100%;
         float:left;    
     }
    .button
         {
             font-family: century gothic;
             border: none;
             color: white;
             padding: 15px 30px;
             text-align: center;
             text-decoration: none;
             display: inline-block;
             font-size: 16px;
             margin: 10px 2px;
             cursor: pointer;
             border-radius: 19px;
             background-image: linear-gradient(to right, gold , black);
         }
        </style>
    </head>
    <body>
        <?php
            include'header.php';
        ?>
        <div class="login-box">
            <form method="post" action="authen.php" <?php echo $_SERVER\['PHP_SELF'\]; ?>>
                        <h1>Create Account</h1>
                        <p><b>Full Name : </b></p>
                                    <input type="text" class="textarea" id="fname" name=" fname" placeholder="Full Name" style="width:100%;" name="fname" pattern="\[A-Za-z \]+" required >
                            <p><b>Email :</b></p> 
                                    <input type="email" class="textarea" id="email" placeholder="Email" style="width:100%;" name="email" pattern="\[a-z0-9._%+-\]+@\[a-z0-9.-\]+\.\[a-z\]{2,}$" required>
                            <p><b>Username :</b></p>
                                    <input type="text" id="user" class="textarea" placeholder="Username" style="width:100%;" name="user" pattern="\[A-Za-z0-9\]{5,}" required>
                            <p><b>Phone :</b></p>
                                    <input type="text" id="phno" class="textarea" placeholder="Phone Number" style="width:100%;" name="phno" pattern="\[0-9\]{10}" required>
                            <p><b>Password :</b></p>
                                    <input type="password" id="pass" placeholder="Password" class="textarea" style="width:100%;" name="pass" pattern="\[A-Za-z0-9\]{6,}" required>
                            <p><b>Confirm Password :</b></p>
                                    <input type="password" id="cpass" class="textarea" placeholder="Confirm Password" style="width:100%;" name="cpass" pattern="\[A-Za-z0-9\]{6,}" required>
                            <p><b>Choose the following:</b></p>
                            <input type="radio" class="textarea" id="pfaculty" name="Faculty" value="Permanent faculty"  required >Permanent Faculty
                            <input type="radio" class="textarea" id="vfaculty" name="Faculty" value="Visiting faculty" required >Visiting Faculty
                            <input type="submit" name="submit" class="Button"id="btn" value="Submit">
            </form>
        </div>
    </body>
</html>

header.css

/*Index CSS*/
body{
    color:#008080;
    font-family:Century Gothic;
    position: relative;
}

/*Naavigation Bar*/
div{
    height:70px;
}
a{
    color: #f2f2f2;
    text-align: center;
    text-decoration: none;  
}
#Name{
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 2px 5px;
    font-size: 30px;
    margin-top:12px;

}
.header {
    overflow: hidden;
    background-color: black;
    position: fixed;
    width: 100%;
    top: 0;
}
.links{
    float: right;
    display: block;
    color: #f2f2f2;
    text-align: center;
    margin-top:10px;
    text-decoration: none;
    padding: 14px 16px;
    font-size: 20px;
}
.links:hover {
    background-color: white;
    color: #008080;
    border-radius: 10px;
    transition: 0.2s;
}

.header .icon {
    display: none;
}
@media screen and (max-width: 600px) {
    .links.icon {
        float: right;
        display: block;
    }
}
@media screen and (max-width: 600px) {
    .header.responsive {
        position: relative;
    }

    .header.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

]1]1

在这段代码中,我遇到了一个问题,我的表单与页眉重叠,当我在页面中向下滚动时,它滚动表单并与页眉重叠,正如我给出的图片,你可以看到我的表单与页眉重叠,这是不应该发生的。它不应该交叉的头,这就是问题所在.和我的radion按钮的文字也没有在正确的格式,我已经尝试了很多东西,但它没有发生。所以,请任何人可以解决这个错误。enter image description here

解决方案:

z-index (任何你想要的值,但大于你的形式)到你的 header 而如果没有 position 属性,在您的头中添加 position: relative.

给TA打赏
共{{data.count}}人
人已打赏
解决方案

前台选择网站架构逻辑结构,如何实现?

2022-4-21 15:08:47

解决方案

Google Cloud Build - source-context.json SHA不匹配。

2022-4-21 15:08:49

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索