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

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

使用px而不是百分比。百分比将调整，一个像素不会被修复。

看看：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

import xyz

Answer 3

如果您指的是内容滑动＆＃34;＆＃34;＆＃34;在固定部分，你可能想尝试给它一个1或更高的z指数。

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

这确保了固定div高于其他所有内容，但是如果使用z-index则要小心，因为如果将其应用于其他内容并将数字设置得更高，它将重叠。随着较低的。一般来说，您希望将所有内容保持在0/1，并将您想要的内容设置为2 ...

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

将内容放在固定的导航栏下

3 个答案: