我无法在导航栏和内容之间创建间隙

Question

我尝试创建一个“固定”导航栏，但导航栏与网站内容重叠。我已经尝试过几种可能性，例如顶部、边距和填充。

HTML：

    <header>
        <nav>
            <a href="#">Home</a>
            <a href="/pages/about.html">About</a>
            <a href="#">Gallery</a>
            <a href="#">Events</a>
            <a href="#">Contact</a>
            <div class="animation start-home"></div>
        </nav>
    </header>

SCSS：

header {
    width: 100%;
    margin: 0 0 10rem 0;
    position: fixed;
    z-index: 999;

    nav {
        margin: 27px auto 0 auto;
        width: 590px;
        height: 50px;
        transition: 0.25s ease-in-out;
        z-index: 4;

        // background-color: #34495e;
        background-color: #313131;
        border-radius: 8px;
        font-size: 0;

        a {
        line-height: 50px;
        height: 100%;
        font-size: 15px;
        display: inline-block;
        position: relative;
        z-index: 1;
        text-decoration: none;
        text-transform: uppercase;
        text-align: center;
        color: white;
        cursor: pointer;
        }

Answer 1

您的标题填充或边距都会影响您的主要内容，因为它位于其“顶部”。您需要在主要内容而不是标题上设置填充。

尝试这样的事情：https://codepen.io/s1adem4n/pen/XWoywrb

<header>
  <nav>
    <a href="#">Home</a>
    <a href="/pages/about.html">About</a>
    <a href="#">Gallery</a>
    <a href="#">Events</a>
    <a href="#">Contact</a>
    <div class="animation start-home"></div>
  </nav>
</header>

<p>
Libero qui beatae vitae sed aut non pariatur. Quia adipisci facilis natus asperiores vel. Omnis commodi animi assumenda consequatur quod dignissimos distinctio. Odit recusandae est possimus totam aliquam aut. Reiciendis ad in qui quisquam eveniet minus.
</p>

还有 CSS：

header {
  width: 100%;
  margin: 0 0 10rem 0;
  position: fixed;
  z-index: 999;

  nav {
    margin: 0 auto 0 auto;
    width: 590px;
    height: 50px;
    transition: 0.25s ease-in-out;
    z-index: 4;
    display: flex;
    justify-content: center;
    gap: 2rem;

    // background-color: #34495e;
    background-color: #313131;
    border-radius: 8px;
    font-size: 0;

    a {
      line-height: 50px;
      height: 100%;
      font-size: 15px;
      display: inline-block;
      position: relative;
      z-index: 1;
      text-decoration: none;
      text-transform: uppercase;
      text-align: center;
      color: white;
      cursor: pointer;
    }
  }
}

body {
  display: flex;
  width: 100%;
  justify-content: center;
}

p {
  padding-top: 3rem;
  width: 50ch;
}