Question

我想在我的网站上制作一个固定的导航栏，但它与其他元素重叠。从片段中可以看到，<nav>应该是导航栏，而<div>应该是网站上的其他内容。 <div>元素必须位于导航栏外部，例如：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>

Answer 1

我创建了一个示例，为中心的支持文本添加了我的课程调用页面：

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>

Answer 2

尽管margin修复是最简单的选择，但是您可以在侧边栏中使用position: sticky; CSS属性。

看看我写的这段JSFidde。

固定导航栏与其他元素重叠

2 个答案: