如何阻止我的表格與我的 header 重疊

Question

<?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

在這段代碼中，我遇到的問題是我的表單與 header 重疊當我在頁面中向下滾動時，它會滾動表單並與 header 重疊。 正如我給出的圖片，您可以看到我的表格與我的 header 重疊，這是不應該發生的。 它不應該與 header 交叉，這就是問題所在。 而且我的單選按鈕文本也沒有以正確的格式出現我已經嘗試了很多東西但它沒有發生。 所以請任何人都可以解決這個錯誤。

Answer 1

Give z-index (any value you want but greater than your form) to your header and if there is no position property in your header, add position: relative .

如何阻止我的表格與我的 header 重疊

問題描述

1 個解決方案

解決方案1
1 2020-04-22 17:02:49

如何阻止我的表格與我的 header 重疊

問題描述

1 個解決方案

解決方案1 1 2020-04-22 17:02:49

解決方案1
1 2020-04-22 17:02:49