如何让按钮位于导航栏下方？

Question

我试图让我的导航栏显示在所有其他内容之上，但是，当人们滚动 header 中的按钮时会越过导航栏吗？有人可以帮助我吗？

如果你需要的话，这里是网站https://summit.tahaparacha1.repl.co/ 这是我的代码：

我的HTML:

        <div class="nav">
            <ul>
                <li> <a href="#">Home</a> </li>
                <li> <a href="#">About</a> </li> 
                <li> <a href="#">Start Learning</a> </li>
        </div>
        <div class="header">
        <h1>The <ex>Best</ex> Way to Learn Maths At <br> Your Own Pace. <ex>Amazing</ex> Teaching <br> Methods With Diagrams And <ex>Easy-<br>To-Understand</ex> Text.</h1>
        <h2>Summit has a massive library of endless education all for <br>free! Learn at your <ex>own pace</ex> and at your <ex>own time</ex>. Expand <br><ex>your</ex> knowledge today, and start learning for free!</h2>
            <div class="headerbtns">
            <a class="grow" href="#">Start Learning</a>
            <a class="grow" href="#">Learn More</a>
            </div>
            <a target="_blank" class="creditbtns "href="https://www.pexels.com/@eberhardgross?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels">Image Credit</a>
        </div>
...

我的Css:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

/* 
font-family: 'Roboto', sans-serif;
*/

body{
    margin: 0;
    padding: 0;
}

.nav ul {
    list-style-type: none;
    background-color: #fcbf49;
    height: 80px;
    width: 100%;
    margin: 0px;
    padding-top: 0px;
    position: fixed;
}

.nav li {
    float: left;
    padding-left: 30px;
    text-align: center;
    padding-top: 19px;
}

.nav a {
    text-decoration: none;
    color: white;
    font-family:  'Roboto', sans-serif;
    font-size: 30px;
}

.nav a:hover {
    text-decoration: none;
    color: #48cae4;
    font-family:  'Roboto', sans-serif;
    font-size: 30px;
}

.headerbtns {
    display: grid;
    grid-template-columns: 15% 15% 70%;
    grid-column-gap: 20px;
    text-align: center;
}

.headerbtns > a {
    background-color: #48cae4;
    color: white;
    font-size: 25px;
    text-decoration: none;
    margin-left: 10px;
    border-width: 0px;
    border-radius: 20px;
    padding: 15px;
    font-family: 'Roboto', sans-serif;
    text-align: centre;
}

.headerbtns > a:nth-child(odd){
    background-color: #fcbf49;
    color: white;
    font-size: 25px;
    text-decoration: none;
    margin-left: 10px;
    border-width: 0px;
    border-radius: 20px;
    padding-left: 7px;; padding-right: 7px;
    font-family: 'Roboto', sans-serif;
    text-align: centre;
}

.grow {
    display: inline-block;
    transition-duration: 0.3s;
    transition-property: transform;
    -webkit-tap-highlight-color: transparent;
    transform: translateZ(0);
    box-shadow: 0 0 1px transparent;
  }
.grow:hover {
    transform: scale(1.1);
}

.header {
    background-image: url("images/SummitHome1.jpg");
    width: 100%; height: 700px;
    background-repeat: no-repeat;
    padding-top: 5px;
    background-size: cover;
}

.header h1 {
    font-size: 55px;
    font-family:  'Roboto', sans-serif;
    color: #0d0035;
    margin-top: 100px;
    margin-left: 15px;
    text-decoration: bold;
}

.header h2 {
    font-size: 35px;
    font-family:  'Roboto', sans-serif;
    color: #0d0035;
    margin-top: 30px;
    margin-left: 15px;
    text-decoration: bold;
}

.header ex {
    color: #da6b02
}

h1 {
    font-size: 40px;
    font-family:  'Roboto', sans-serif;
    text-decoration: bold;
    color: #fcbf49;
    padding-top: 10px; padding-left: 10px;
}


h2 {
    font-size: 30px;
    font-family:  'Roboto', sans-serif;
    text-decoration: bold;
}

h3 {
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    color: #fcbf49;
    padding-left: 10px;
}

p {
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    padding-left: 10px;
}

.main {
    margin: 10px;
}

.main a {
    text-decoration-color: #fcbf49;
    font-family: 'Roboto', sans-serif;
    color: #fcbf49;
}

.main a:hover{ 
    text-decoration-color: #48cae4;
    font-family: 'Roboto', sans-serif;
    color: #48cae4;
}

.main h2{
    
}

.offers{
    display: grid;
    grid-template-columns: 32% 33% 32%;
    grid-column-gap: 20px;
}

有点多，如果你需要的话，这是我的回复（没有编辑权限）：https://replit.com/join/mrmggxewvv-tahaparacha1

Answer 1

尝试向这些元素添加“z-index”css 属性，确保导航栏中的值高于按钮中的值。

Answer 2

z-index

将此放入您的 css

.nav ul {
    z-index: 1;
}

如果您想查看结果，请在此处输入 JSFIDDLE

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

/* 
font-family: 'Roboto', sans-serif;
*/

body {
    margin: 0;
    padding: 0;
}

.nav ul {
    list-style-type: none;
    background-color: #fcbf49;
    height: 80px;
    width: 100%;
    margin: 0px;
    padding-top: 0px;
    position: fixed;
}

.nav li {
    float: left;
    padding-left: 30px;
    text-align: center;
    padding-top: 19px;
}

.nav a {
    text-decoration: none;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
}

.nav a:hover {
    text-decoration: none;
    color: #48cae4;
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
}

.headerbtns {
    display: grid;
    grid-template-columns: 15% 15% 70%;
    grid-column-gap: 20px;
    text-align: center;
}

.headerbtns>a {
    background-color: #48cae4;
    color: white;
    font-size: 25px;
    text-decoration: none;
    margin-left: 10px;
    border-width: 0px;
    border-radius: 20px;
    padding: 15px;
    font-family: 'Roboto', sans-serif;
    text-align: centre;
}

.headerbtns>a:nth-child(odd) {
    background-color: #fcbf49;
    color: white;
    font-size: 25px;
    text-decoration: none;
    margin-left: 10px;
    border-width: 0px;
    border-radius: 20px;
    padding-left: 7px;
    ;
    padding-right: 7px;
    font-family: 'Roboto', sans-serif;
    text-align: centre;
}

.grow {
    display: inline-block;
    transition-duration: 0.3s;
    transition-property: transform;
    -webkit-tap-highlight-color: transparent;
    transform: translateZ(0);
    box-shadow: 0 0 1px transparent;
}

.grow:hover {
    transform: scale(1.1);
}

.header {
    background-image: url("images/SummitHome1.jpg");
    width: 100%;
    height: 700px;
    background-repeat: no-repeat;
    padding-top: 5px;
    background-size: cover;
}

.header h1 {
    font-size: 55px;
    font-family: 'Roboto', sans-serif;
    color: #0d0035;
    margin-top: 100px;
    margin-left: 15px;
    text-decoration: bold;
}

.header h2 {
    font-size: 35px;
    font-family: 'Roboto', sans-serif;
    color: #0d0035;
    margin-top: 30px;
    margin-left: 15px;
    text-decoration: bold;
}

.header ex {
    color: #da6b02
}

h1 {
    font-size: 40px;
    font-family: 'Roboto', sans-serif;
    text-decoration: bold;
    color: #fcbf49;
    padding-top: 10px;
    padding-left: 10px;
}

h2 {
    font-size: 30px;
    font-family: 'Roboto', sans-serif;
    text-decoration: bold;
}

h3 {
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    color: #fcbf49;
    padding-left: 10px;
}

p {
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    padding-left: 10px;
}

.main {
    margin: 10px;
}

.main a {
    text-decoration-color: #fcbf49;
    font-family: 'Roboto', sans-serif;
    color: #fcbf49;
}

.main a:hover {
    text-decoration-color: #48cae4;
    font-family: 'Roboto', sans-serif;
    color: #48cae4;
}

.main h2 {}

.offers {
    display: grid;
    grid-template-columns: 32% 33% 32%;
    grid-column-gap: 20px;
}

.nav ul {
    z-index: 99;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="nav">
        <ul>
            <li> <a href="#">Home</a> </li>
            <li> <a href="#">About</a> </li>
            <li> <a href="#">Start Learning</a>
            </li>
        </ul>
    </div>
    <div class="header">
        <h1>The
            <ex>Best</ex> Way to Learn Maths At <br> Your Own Pace.
            <ex>Amazing</ex> Teaching <br> Methods With Diagrams And
            <ex>Easy-<br>To-Understand</ex> Text.</h1>
        <h2>Summit has a massive library of endless education all for <br>free! Learn at your
            <ex>own pace</ex> and at your
            <ex>own time</ex>. Expand <br>
            <ex>your</ex> knowledge today, and start learning for free!</h2>
        <div class="headerbtns">
            <a class="grow" href="#">Start Learning</a>
            <a class="grow" href="#">Learn More</a>
        </div>
        <a target="_blank" class="creditbtns " href="https://www.pexels.com/@eberhardgross?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels">Image Credit</a>
    </div>
</body>

</html>

Answer 3

您应该为您的 .nav ul

添加 z-index: 1

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

/* 
font-family: 'Roboto', sans-serif;
*/

body {
    margin: 0;
    padding: 0;
}

.nav ul {
    list-style-type: none;
    background-color: #fcbf49;
    height: 80px;
    width: 100%;
    margin: 0px;
    padding-top: 0px;
    position: fixed;
    z-index: 1;
}

.nav li {
    float: left;
    padding-left: 30px;
    text-align: center;
    padding-top: 19px;
}

.nav a {
    text-decoration: none;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
}

.nav a:hover {
    text-decoration: none;
    color: #48cae4;
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
}

.headerbtns {
    display: grid;
    grid-template-columns: 15% 15% 70%;
    grid-column-gap: 20px;
    text-align: center;
}

.headerbtns>a {
    background-color: #48cae4;
    color: white;
    font-size: 25px;
    text-decoration: none;
    margin-left: 10px;
    border-width: 0px;
    border-radius: 20px;
    padding: 15px;
    font-family: 'Roboto', sans-serif;
    text-align: centre;
}

.headerbtns>a:nth-child(odd) {
    background-color: #fcbf49;
    color: white;
    font-size: 25px;
    text-decoration: none;
    margin-left: 10px;
    border-width: 0px;
    border-radius: 20px;
    padding-left: 7px;
    ;
    padding-right: 7px;
    font-family: 'Roboto', sans-serif;
    text-align: centre;
}

.grow {
    display: inline-block;
    transition-duration: 0.3s;
    transition-property: transform;
    -webkit-tap-highlight-color: transparent;
    transform: translateZ(0);
    box-shadow: 0 0 1px transparent;
}

.grow:hover {
    transform: scale(1.1);
}

.header {
    background-image: url("images/SummitHome1.jpg");
    width: 100%;
    height: 700px;
    background-repeat: no-repeat;
    padding-top: 5px;
    background-size: cover;
}

.header h1 {
    font-size: 55px;
    font-family: 'Roboto', sans-serif;
    color: #0d0035;
    margin-top: 100px;
    margin-left: 15px;
    text-decoration: bold;
}

.header h2 {
    font-size: 35px;
    font-family: 'Roboto', sans-serif;
    color: #0d0035;
    margin-top: 30px;
    margin-left: 15px;
    text-decoration: bold;
}

.header ex {
    color: #da6b02
}

h1 {
    font-size: 40px;
    font-family: 'Roboto', sans-serif;
    text-decoration: bold;
    color: #fcbf49;
    padding-top: 10px;
    padding-left: 10px;
}

h2 {
    font-size: 30px;
    font-family: 'Roboto', sans-serif;
    text-decoration: bold;
}

h3 {
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    color: #fcbf49;
    padding-left: 10px;
}

p {
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    padding-left: 10px;
}

.main {
    margin: 10px;
}

.main a {
    text-decoration-color: #fcbf49;
    font-family: 'Roboto', sans-serif;
    color: #fcbf49;
}

.main a:hover {
    text-decoration-color: #48cae4;
    font-family: 'Roboto', sans-serif;
    color: #48cae4;
}

.main h2 {}

.offers {
    display: grid;
    grid-template-columns: 32% 33% 32%;
    grid-column-gap: 20px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="nav">
        <ul>
            <li> <a href="#">Home</a> </li>
            <li> <a href="#">About</a> </li>
            <li> <a href="#">Start Learning</a>
            </li>
        </ul>
    </div>
    <div class="header">
        <h1>The
            <ex>Best</ex> Way to Learn Maths At <br> Your Own Pace.
            <ex>Amazing</ex> Teaching <br> Methods With Diagrams And
            <ex>Easy-<br>To-Understand</ex> Text.</h1>
        <h2>Summit has a massive library of endless education all for <br>free! Learn at your
            <ex>own pace</ex> and at your
            <ex>own time</ex>. Expand <br>
            <ex>your</ex> knowledge today, and start learning for free!</h2>
        <div class="headerbtns">
            <a class="grow" href="#">Start Learning</a>
            <a class="grow" href="#">Learn More</a>
        </div>
        <a target="_blank" class="creditbtns " href="https://www.pexels.com/@eberhardgross?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels">Image Credit</a>
    </div>
</body>

</html>

如何让按钮位于导航栏下方？

How can I make the buttons go under the nav bar?

html

css

format

将此放入您的 css

如果您想查看结果，请在此处输入 JSFIDDLE