为什么固定div的位置会破坏它在HTML和CSS中的外观

位置：固定 表示元素的位置相对于浏览器窗口，而不是相对于其父div。请将其用作参考

---

ps为什么不尝试绝对或粘性的东西，如导航栏

添加宽度：100%；在您的.topnav CSS上。在您提供的代码中，topnav div没有关闭。添加了100%宽度并工作，特别感谢@NerdyGeek

<div class="topnav">
<div class="container">
    <span class="icons">
        <a href="#contact"><i class="fa fa-phone"> </i> Contact</a>
    </span>
    <span class="icons">
        <a href="#showcase"><i class="fa fa-suitcase"> </i> Showcase</a>
    </span>
    <span class="icons">
        <a href="#home"><i class="fa fa-home"> </i> Home</a>
    </span>         
</div>

.topnav {
    overflow: hidden;
    background-color: #333;
    position: fixed;
}

.topnav a {
    float: right;
    display: block;
    color: #f2f2f2;
    text-align: right;
    padding: 14px 16px;
    text-decoration: none;
}