如何将position:relative元素置于position:fixed元素之后

我懂你现在的困扰——fixed元素占满整个视口后，想让relative元素紧跟在它下方，但用padding-top会导致relative的顶部区域和fixed元素重叠。这是因为fixed元素完全脱离了正常文档流，而padding是元素内部的空间，没法把整个relative元素挤到fixed的下方去。

最简单的解决办法是把padding-top: 100vh改成**margin-top: 100vh**，这样relative元素会被外边距推到视口底部，滚动页面时才会进入视野，同时不会和fixed元素产生重叠。

修改后的代码 #

CSS部分：

#page-wrap { margin-top: 70px; max-width: 100%; }
#homeMain { width: 100%; height: 100vh; position: fixed; background: blue; }
#sectionCover { position: relative; margin-top: 100vh; /* 替换padding为margin */ height: auto; width: 100%; background: green; }

HTML部分（无需改动）：

<div id="page-wrap">
 <section id="homeMain">
 <p>fndskjafndoaf</p>
 </section>
 <div id="sectionCover">
 <p>fndskjafndoaf</p>
 <p>fndskjafndoaf</p>
 <p>fndskjafndoaf</p>
 <p>fndskjafndoaf</p><p>fndskjafndoaf</p>
 <p>fndskjafndoaf</p>
 <p>fndskjafndoaf</p>
 <p>fndskjafndoaf</p><p>fndskjafndoaf</p>
 <p>fndskjafndoaf</p>
 <p>fndskjafndoaf</p>
 </div>
 </div>

原理说明 #

• position: fixed的元素完全脱离文档流，不会占据正常布局空间，所以#sectionCover的初始布局不会受它影响。
• 使用margin-top: 100vh是给#sectionCover设置一个等于视口高度的顶部外边距，让它的顶部刚好卡在视口底部，只有滚动页面时才会显示出来。
• 如果用padding-top，只是给#sectionCover的内部顶部添加空白空间，元素本身的顶部位置没变，自然会和fixed元素重叠。

内容的提问来源于stack exchange，提问作者Paul