为什么导航顶部有空白区？

Question

为什么导航栏顶部有间隙？新手，并试图找出我做错了什么...我知道当我取消位置修复它在网页顶部的网站。

可能是显示器：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的内联代码片段来模拟结果（我看到您熟悉了代码突出显示等一些工具，下一步将模拟像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个navs，一个固定，一个静态）和ids你必须复制代码或做一些不被视为最佳实践的解决方法）。
• 尽量不要使用Helvetica，不仅大多数计算机没有安装它，而且它们与你的辅助（Arial）非常不同，而且这些单词的长度可能是你在开发时看不到的问题，比如nav itens打破线条或按钮在Helvetica变大，但在Arial中没有。 （另外，Helvetica是一种付费字体，如果你想真正使用它，你必须购买它）
• 我认为最好在margin定位元素上使用padding或relative，而不是在top中使用的#mission-statement-body间距。此外，有了这些你不必设置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>