将内容放在固定导航栏下

Question

我正在尝试使网站内容显示在导航栏下方，导航栏的位置已固定。我将尺寸设置为百分比，因此填充（即使是百分比）在不同的宽高比下也不会真正起作用（该网站在移动设备上应该类似地工作）。

* {
 padding: 0;
 margin: 0;
 user-select: none;
 -ms-user-select: none;
 -moz-user-select: none;
}
body {
 font-family: sans-serif;
}
.topfix {
 position: fixed;
 width: 100%;
}
.bannertop {
 width: 80%;
 background-color: #000;
 color: #fff;
 text-align: center;
 padding: 0% 10%;
 border-top: 4px solid rgb(50, 50, 50);
}
.nav li {
 list-style-type: none;
 text-align: center;
 width: 20%;
 float: left;
 display: block;
 background-color: rgb(50, 50, 50);
 transition: 1s;
 outline: 2px solid rgb(50, 50, 50);
 outline-offset: -2px;
}
.nav li:hover {
 background-color: rgb( 240, 240, 240);
 color: #000;
 transition: 1s;
}
a {
 text-decoration: none;
 color: #fff;
 transition: 1s;
}
.content {
  text-align: center;
  width: 80%;
  margin: 0% 10%;
  background-color: #f0f0f0;
  padding-top: 10%;
}

  <div class="topfix">
   <div class="bannertop"><img class="bannerimg" src="img/bannerimg.png "></div>
    <div class="nav">
     <ul>
      <a href="#"><li>Link</li></a>
      <a href="#"><li>Link</li></a>
      <a href="#"><li>Link</li></a>
      <a href="#"><li>Link</li></a>
      <a href="#"><li>Link</li></a>
     </ul>
    </div>
   </div>
      <div class="content">Some content</div>

Answer 1

如果您希望修复 header，则需要对其下方的元素应用一些填充，使其显示在固定元素下方。

使用 px 而不是百分比。百分比会调整，像素不会，它是固定的。

看看：

header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  height:120px;
  background: #ccc
}
main {
  padding-top:120px;
}
main {
  font-size:44px
}

<header>
   I am fixed
</header>

<main>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae risus sed est molestie rhoncus. Duis eget sagittis ante. Donec semper nisl vel pellentesque hendrerit. Nullam congue efficitur viverra. Duis vestibulum ligula id congue accumsan. Maecenas quis ligula ante. Nulla facilisi. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam vitae elit euismod, dictum est bibendum, venenatis neque. Mauris congue tortor sed elit molestie, et gravida sem viverra. Donec dignissim, dui in pulvinar lacinia, elit purus egestas nibh, sit amet mattis sapien nisi non enim. Suspendisse dictum mi vitae elit facilisis, non aliquet nisl imperdiet. Sed eget fermentum lacus, quis dapibus mauris. Suspendisse potenti. Integer luctus, lorem ac porta convallis, massa purus rutrum risus, id porttitor magna ex elementum purus. Nulla sagittis, risus vitae ullamcorper bibendum, dui sem maximus quam, nec vestibulum nibh ex in ipsum. Suspendisse ex ligula, aliquet sed dapibus eu, venenatis et dolor. Vivamus vitae nulla nec elit blandit porta dictum vel augue. Proin ut lorem interdum, ultricies ex non, bibendum nisi. Phasellus aliquam, orci in viverra varius, nibh neque aliquam lacus, vitae hendrerit ex ante ut est. Aenean tincidunt ac augue ut mattis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec malesuada sapien metus, sed vulputate massa imperdiet eget. 
</main>

Answer 2

像这样更新您的 css。使用像素而不是百分比

.topfix {
    position: fixed;
    width: 100%;
    top: 0px;
    height: 42px;
}
.content {
    text-align: center;
    width: 80%;
    margin: 0% 10%;
    background-color: #f0f0f0;
    margin-top: 42px;
}

Answer 3

如果您指的是滑动 "under" 固定部分的内容，您可能想尝试给它一个 z-index 1 或更高的值。

.topfix {
    position: fixed;
    width: 100%;
    top: 0px;
    height: 42px;
    z-index: 2;
}

这确保固定的 div 高于其他所有内容，但如果使用 z-index 时要小心，因为如果将它应用于其他内容并将数字设置得更高，它会重叠。与较低的。通常，您希望将所有内容都保持在 0/1，并将您想要的设置为 2...

此外，您还需要使用像素而不是百分比！

将内容放在固定导航栏下

Put content under fixed navbar

html

css

margin

css-position