不管显示器大小如何，使导航栏保持相同位置

Question

无论显示器大小如何，我都需要将导航栏放置在页面的同一位置。我正在使用与另一个div相同的位置设计方案，该位置是通用的，但是在应用时，该位置对于不同尺寸的显示器都是关闭的。

我尝试将位置切换为相对，但是仍然会出现相同的效果。

    @import url('https://use.fontawesome.com/releases/v5.8.1/css/all.css');

#panel {
    padding: 5px;
    border-top: none;
    font-size: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 515px;
    background: #191919;
}

.tab {
    background-color: #555;
    position: fixed;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 16%;
}

.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 23.8px;
    transition: 0.3s;
    font-size: 18px;
    color: white;
}

.tab button:hover {
    background-color: #000;
}
.tab button:hover {
    background-color: #000;
}
.tab button.active {
    background-color: #ccc;
}

   

        <div id="game">
      <div class="tab">
           <button class="active"><i class="fas fa-home"></i></button>
           <button><i class="fas fa-keyboard"></i></button>
           <button><i class="fas fa-palette"></i></button>
           <button><i class="fas fa-cog"></i></button>
           <button><i class="fab fa-discord"></i></button>
         </div>
        <div id="panel"></div>
     </div>

Answer 1

您是否正在寻找类似的东西？

.navbar
{
    position: fixed;
}