时间戳

首页 > 解决方案 > 固定导航栏与其他元素重叠

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

问题描述

我想在我的网站上制作一个固定的导航栏，但它与其他元素重叠。正如您从片段中看到的那样，<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>

标签： htmlcss

解决方案

我创建了一个示例，对于中心的支持文本，我添加了类调用页面：

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>

推荐阅读