内容落后于固定导航栏，不会被下推答案

【问题标题】：Content falls behind fixed navbar and won't get pushed down内容落后于固定导航栏，不会被下推
【发布时间】：2018-04-01 22:53:55
【问题描述】：

大家晚上好。我正在尝试制作一个带有固定导航栏的网站。我试图达到的结果与您在我的CodePen 中看到的有点不同

在我的示例中，我试图将 h1 元素放置在 navbar 下方，但我似乎无法让它工作。我已经尝试使用 z-index，就像其他人在类似帖子中所建议的那样，但我没有看到任何变化。

nav
 .box
  #nav-icon1
   span
   span
   span
   span
 ul
  li
   a(href="#") Despre
  li
   a(href="#") FAQ
  li
   a(href="#") Numere
  li
   a(href="#") Colectiv
h1 test

SASS

body
 height: 2000px
 nav
  border: 1px solid black
  width: 100vw
  margin: 0 auto
  position: fixed
  ul
   text-align: center
   font-size: 0 // I'm using this to eliminate the space between the li elements
  li
   display: inline-block
   padding: 3vh 6vw
   &:hover
    cursor: pointer
    a
     font-size: calc(20px + (30 - 20) * ((100vw - 300px) / (1600 - 300)))
     text-decoration: none
     color: gray
 h1
  font-size: 50px

【问题讨论】：

您想让 h1 固定在导航栏下方吗？
是的，我想将它放在导航栏下方，并在滚动时停留在那里
由于nav 的位置固定，所以below 没有任何意义，除非您将h1 也固定。

标签： html css sass pug

【解决方案1】：

please take a look of edited code for h1

    body
  height: 2000px
  nav
    border: 1px solid black
    width: 100vw
    margin: 0 auto
    position: fixed
    ul
      text-align: center
      font-size: 0
      li
        display: inline-block
        padding: 3vh 6vw
        &:hover
          cursor: pointer
        a
          font-size: calc(20px + (30 - 20) * ((100vw - 300px) / (1600 - 300)))
          text-decoration: none
          color: gray
h1
  padding-top: 10vh
  font-size: 50px
  position: fixed
  left: 0

编辑代码笔here

【讨论】：

【解决方案2】：

如果您可以为导航栏设置一个高度，我建议您这样做。使用与固定导航/标题相同的高度来偏移页面内容是相当常见的。并且不要只偏移 h1，偏移一个内容包装类，这样您就可以继续在其中添加所有内容。

PUG/HTML nav .box #nav-icon1 span span span span ul li a(href="#") Despre li a(href="#") FAQ li a(href="#") Numere li a(href="#") Colectiv div.content-wrapper h1 test

SASS body height: 2000px nav border: 1px solid black width: 100vw margin: 0 auto position: fixed top: 0 height: 80px ul text-align: center font-size: 0 li display: inline-block padding: 3vh 6vw &:hover cursor: pointer a font-size: calc(20px + (30 - 20) * ((100vw - 300px) / (1600 - 300))) text-decoration: none color: gray .content-wrapper margin-top: 80px h1 font-size: 50px

如果您无法设置高度，您可以编写一些 javascript 来获取高度并以编程方式设置 margin-top。

【讨论】：