为什么我的导航顶部有一个空白区域？

Question

为什么我的导航栏顶部有一个空白？对此新手并试图找出我做错了什么......我知道当我取消位置时，它会很好地位于页面顶部。

可能是 display: flex;那是造成问题的原因吗？提前感谢您的回复。

显然我必须写一整本书才能得到并回答这个问题。

html {
        margin: 0;
        padding: 0;
    }
    
    body {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 22px;
        color: seashell;
        background-color: black;
        opacity: 0.9;
    }
    
    nav {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: 1px solid seashell;
        position: fixed;
        width: 100%;
        z-index: 10;
        background-color: black;
    }
    
    #logo img{
        height: 50px;
    }
    
    nav ul {
        list-style: none;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    nav ul li {
        text-decoration: underline;
        padding-right: 20px;
    }
    
    #mission-statement-body {
        position: relative;
        top: 100px;
        background-image: url("images/img-mission-background.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: 700px;
        width: 1200px;
        margin: 0 auto;
    }
    
    #mission-statement {
        text-align: center;
        background-color: black;
    }

<nav>
        <div id="logo">
            <img src="images/img-tea-cozy-logo.png" />
        </div>
        <ul>
            <li>Mission</li>
            <li>Featured Tea</li>
            <li>Locations</li>
        </ul>
    </nav>

    <div id="mission-statement-body">
        <div id="mission-statement">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
    </div>

Answer 1

使用 position:fixed 时 top 属性设置为特定值，因此您可以通过将 top 设置为 0 来避免这种情况。

Answer 2

TL:DR - 只需将固定定位元素的 top 设置为 0，它就会“固定在浏览器屏幕的顶部”。

首先尝试将您的代码作为示例运行，以便更容易回答您的问题。您可以使用Codepen（我个人最喜欢的）或来自stackoverflow 的内联代码sn-p 模拟结果（我看到您熟悉一些工具，如代码高亮，下一步将模拟Abed Putra 之类的代码） )。

我在 CodePen 上测试了您的代码，但无法弄清楚为什么它有这个偏移量，当我删除 #mission-statement-body 时，导航回到顶部（浏览器正确），这很奇怪。

基本上像absolute和fixed这样的“在我的浏览器周围浮动”位置继承了最近的relative父级的位置，但在你的情况下没有这样的事情（所以它继承自上帝知道什么)。

因此，每次使用这些定位属性时，请尝试设置特定位置（如top、left、bottom 或right）。不要依赖默认的浏览器定位，因为它们总是会让你失望，它在 Chrome 上可能看起来不错，但在 Firefox 上却很奇怪。

Click to see the code on CodePen

关于您的代码的其他一些观察：

• 尽量不要使用ids 来设置 CSS 规则，有几个原因，但基本上它们是非常具体的选择器（例如 JS 处理），任何 CSS 组件都应该是可复制和可扩展的（你可以有 2 个 @ 987654334@s，一个是固定的，一个是静态的，如果使用 ids，您将不得不复制代码或做一些不被视为最佳实践的变通方法。
• 尽量不要使用Helvetica，不仅大部分电脑没有安装，而且和你的二级（Arial）有很大的不同，而且字长可能是你开发时看不到的问题，就像导航在 Helvetica 中打破线条或按钮变大但在 Arial 中没有。 （此外，Helvetica 是一种付费字体，如果您想真正使用它，则必须购买它）
• 我认为最好在relative 定位元素上使用margin 或padding，而不是#mission-statement-body 中使用的top 间距。此外，有了这些你就不必设置position

希望对你有帮助

Answer 3

你试过了吗？

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid seashell;
  position: fixed;
  width: 100%;
  z-index: 10;
  background-color: black;
  top:0;
}

请检查一下...

   html {
    margin: 0;
    padding: 0;
}

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid seashell;
  position: fixed;
  width: 100%;
  z-index: 10;
  background-color: black;
  top:0;
}

#logo img{
    height: 50px;
}

nav ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
}

nav ul li {
    text-decoration: underline;
    padding-right: 20px;
}

#mission-statement-body {
    position: relative;
    top: 100px;
    background-image: url("images/img-mission-background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 700px;
    width: 1200px;
    margin: 0 auto;
}

#mission-statement {
    text-align: center;
    background-color: black;
}

<nav>
        <div id="logo">
            <img src="images/img-tea-cozy-logo.png" />
        </div>
        <ul>
            <li>Mission</li>
            <li>Featured Tea</li>
            <li>Locations</li>
        </ul>
    </nav>

    <div id="mission-statement-body">
        <div id="mission-statement">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
    </div>