将内容置于固定导航栏下

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而不是百分比。 百分比会调整，像素不会调整，固定不变。

看一看：

 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

如果您要指的是在固定部分“下方”滑动的内容，则可能要尝试将其z-index设置为1或更高。

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

这样可以确保固定div高于其他所有元素，但是使用z-index时要小心，因为如果将其应用到其他对象上并将其放高，它将重叠。 与较低的。 通常，您需要将所有内容保持在0/1，然后将最上面的内容设置为2 ...

另外，您将要使用像素而不是百分比！