无论显示器大小如何,我都需要将导航栏放置在页面的相同位置。我正在使用与另一个 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>
最佳答案
你在找这样的东西吗?
.navbar
{
position: fixed;
}
关于html - 无论显示器大小如何,使导航栏保持相同的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56960109/