我想在我的网站上做一个固定的导航栏，但它与其他元素重叠。 从代码片段中可以看到， 我已经知道 null null
我创建了一个示例，用于添加类调用页面中心的支持文本: null
虽然 请看一下我写的JSFidde。应该是导航栏，而应该是网站上的一些其他内容。
元素需要位于导航栏外的空格上，如下所示:https://i.imgur.com/ugfdtuv.png
Margin-left方法，但是我的导航栏没有指定的宽度，所以这个方法不能工作，而且我正在寻找一种更有效的方法来解决这个问题。nav {
top: 0;
left: 0;
height: 100%;
padding: 2cm;
position: fixed;
border-right: 1px solid black;
}
nav a {
padding: 20px 0px;
display: block;
}<nav>
<a href="">Sample</a>
<a href="">Sample</a>
<a href="">Sample</a>
<a href="">Sample</a>
</nav>
<div>
<h1>Sample text</h1>
</div>
共2个答案
匿名用户
nav {
top: 0;
left: 0;
height: 100%;
padding: 2cm;
position: fixed;
border-right: 1px solid black;
z-index: 999;
display: block;
}
nav a {
padding: 20px 0px;
display: block;
}
.page{
position: absolute;
top: 0;
right: 0;
width: calc(100% - 200px);
background-color: #F4F7FA;
min-height: 100vh;
padding-bottom: 50px
}<nav>
<a href="">Sample</a>
<a href="">Sample</a>
<a href="">Sample</a>
<a href="">Sample</a>
</nav>
<div class='page'>
<h1>Sample text</h1><br>
<p>Another element</p>
</div>
匿名用户
margin修复是最简单的选项，但您可以在侧边栏上使用position:sticky；CSS属性。
