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

Question

<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>

CSS

.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;
}

As you see here, if the position is relative it will take the full width of the container but when I make it fixed, the right part cuts

Answer 1

位置:固定表示元素相对于浏览器窗口定位，而不是相对于其父 div。请使用此作为引用

https://www.w3schools.com/cssref/pr_class_position.asp

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