我试图隐藏主体后面的页脚，当主体在页脚上方滚动时会显示该页脚。 我的问题是，当我将页脚z-index设置为负数时，它会隐藏页脚尼维利但链接无法点击
所以我试图将主要内容z-index向上提升并将页脚z-index设置为零但是页脚在主要内容之上是可见的
继承了一些代码
#main {
z-index:4;
padding:0px 0px 450px;
border-bottom:1px solid red;
}
#mainBg {
background:red;
}
footer {
padding: 50px 0;
bottom:0;
position:fixed;
z-index:0;
width:100%;
}<body>
<div id="main">
<div id="mainBg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere, justo eget auctor sagittis, sapien odio rutrum quam, eu feugiat sem lacus lacinia quam. Morbi malesuada porta sapien eu ornare. Pellentesque vel nibh auctor lectus malesuada porttitor. Cras et dui quam. Nunc sollicitudin mi condimentum iaculis rhoncus. Sed tristique mollis sagittis. Fusce bibendum congue augue, nec scelerisque velit egestas viverra. Phasellus a rhoncus leo. In tempor sagittis rhoncus. Ut a risus viverra, ornare lacus non, ornare nisi. Curabitur luctus mauris orci, quis condimentum lacus facilisis a. Nullam cursus, nisl id sagittis feugiat, risus ipsum consequat felis, id luctus erat felis eget velit. Pellentesque vehicula risus at nibh faucibus, in venenatis tellus aliquam. Pellentesque dolor libero, vehicula et magna efficitur, sollicitudin pharetra ipsum. Curabitur tempus et sapien eu facilisis. Phasellus ipsum diam, pellentesque sed felis non, euismod malesuada orci. Nulla rutrum eros in dignissim pretium. Donec et orci leo. Nullam quis luctus massa. Donec rhoncus lacinia cursus. Fusce sed imperdiet ligula. Maecenas fermentum sed velit eget aliquam. Nullam vel ipsum erat. Mauris ultricies feugiat metus, sed scelerisque arcu imperdiet eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum porta felis at pharetra maximus. Curabitur efficitur turpis non interdum finibus. Mauris ut consectetur nisl, eget condimentum sem. Integer rutrum, augue vitae faucibus rutrum, metus tellus volutpat quam, in fermentum arcu risus quis libero. Curabitur faucibus pulvinar tempus. Aenean eu ex ullamcorper, ullamcorper enim a, convallis elit. Cras id facilisis turpis. Nunc urna libero, rhoncus eget blandit id, sollicitudin vitae nibh. Nunc sed nibh faucibus, consequat nibh quis, commodo neque. Nullam porttitor est a dui bibendum, non scelerisque nulla imperdiet. Mauris ut suscipit magna. Aenean magna orci, aliquam nec fringilla ut, blandit ac augue. Aliquam aliquet, metus ut congue varius, massa erat dapibus lectus, sit amet blandit libero tortor eget nibh. Nam tincidunt tristique elementum. Vivamus sagittis nec tellus ut sollicitudin. Vivamus nec lobortis nisl. Proin placerat, orci sed interdum efficitur, libero enim tempor nisl, quis iaculis nisl ligula non dolor. Mauris in felis at justo varius posuere. Nam ac lorem ex. Aliquam convallis ac metus ac condimentum. Aliquam ac ex a lacus placerat rutrum sed a eros. Nunc et tellus at enim rutrum volutpat. Praesent egestas ligula at diam convallis, eget posuere diam vulputate. Cras tempus non nibh eu hendrerit. Aenean erat odio, posuere mattis neque nec, gravida tristique velit. Aenean condimentum massa sed dictum viverra. Sed bibendum velit ac felis rhoncus volutpat feugiat ut tellus. Praesent mollis malesuada sapien vel feugiat. Vivamus scelerisque, lacus nec blandit sodales, nibh velit volutpat augue, quis vehicula urna justo ac felis. Aliquam erat volutpat. Sed non purus eget erat vulputate varius ac vel urna. Phasellus ac tempor mauris. Morbi ut ligula tristique, fringilla metus quis, pharetra mauris. Nunc non fringilla dui, non varius sem. Quisque ullamcorper, est vitae rhoncus porttitor, sapien urna semper orci, non aliquam lacus ipsum non sem. Phasellus volutpat nibh nulla, eu auctor lacus suscipit eget.</div>
</div>
<footer>footer footer
<br/>
<br/>footer footer
<br/>
<a href="http://google.co.uk">Google link</a>
<br/>footer footer
<br/>
<br/>footer footer
<br/>
<br/>
</footer>
</body>
我添加了一些指向js fiddles的链接以显示此操作
答案 0 :(得分：1)
将position:relative添加到main，然后将padding添加到正文的底部或height。您仍然在main下导致此问题（如评论中所述）。
Padding Bottom Solution：
#main {
z-index:4;
padding:0px 0px 450px;
border-bottom:1px solid red;
position: relative;
}
#mainBg {
background:red;
}
footer {
padding: 50px 0;
bottom:0;
position:fixed;
z-index:3;
width:100%;
}
body {
padding-bottom:200px;
}<body>
<div id="main">
<div id="mainBg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere, justo eget auctor sagittis, sapien odio rutrum quam, eu feugiat sem lacus lacinia quam. Morbi malesuada porta sapien eu ornare. Pellentesque vel nibh auctor lectus malesuada porttitor. Cras et dui quam. Nunc sollicitudin mi condimentum iaculis rhoncus. Sed tristique mollis sagittis. Fusce bibendum congue augue, nec scelerisque velit egestas viverra. Phasellus a rhoncus leo. In tempor sagittis rhoncus. Ut a risus viverra, ornare lacus non, ornare nisi. Curabitur luctus mauris orci, quis condimentum lacus facilisis a. Nullam cursus, nisl id sagittis feugiat, risus ipsum consequat felis, id luctus erat felis eget velit. Pellentesque vehicula risus at nibh faucibus, in venenatis tellus aliquam. Pellentesque dolor libero, vehicula et magna efficitur, sollicitudin pharetra ipsum. Curabitur tempus et sapien eu facilisis. Phasellus ipsum diam, pellentesque sed felis non, euismod malesuada orci. Nulla rutrum eros in dignissim pretium. Donec et orci leo. Nullam quis luctus massa. Donec rhoncus lacinia cursus. Fusce sed imperdiet ligula. Maecenas fermentum sed velit eget aliquam. Nullam vel ipsum erat. Mauris ultricies feugiat metus, sed scelerisque arcu imperdiet eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum porta felis at pharetra maximus. Curabitur efficitur turpis non interdum finibus. Mauris ut consectetur nisl, eget condimentum sem. Integer rutrum, augue vitae faucibus rutrum, metus tellus volutpat quam, in fermentum arcu risus quis libero. Curabitur faucibus pulvinar tempus. Aenean eu ex ullamcorper, ullamcorper enim a, convallis elit. Cras id facilisis turpis. Nunc urna libero, rhoncus eget blandit id, sollicitudin vitae nibh. Nunc sed nibh faucibus, consequat nibh quis, commodo neque. Nullam porttitor est a dui bibendum, non scelerisque nulla imperdiet. Mauris ut suscipit magna. Aenean magna orci, aliquam nec fringilla ut, blandit ac augue. Aliquam aliquet, metus ut congue varius, massa erat dapibus lectus, sit amet blandit libero tortor eget nibh. Nam tincidunt tristique elementum. Vivamus sagittis nec tellus ut sollicitudin. Vivamus nec lobortis nisl. Proin placerat, orci sed interdum efficitur, libero enim tempor nisl, quis iaculis nisl ligula non dolor. Mauris in felis at justo varius posuere. Nam ac lorem ex. Aliquam convallis ac metus ac condimentum. Aliquam ac ex a lacus placerat rutrum sed a eros. Nunc et tellus at enim rutrum volutpat. Praesent egestas ligula at diam convallis, eget posuere diam vulputate. Cras tempus non nibh eu hendrerit. Aenean erat odio, posuere mattis neque nec, gravida tristique velit. Aenean condimentum massa sed dictum viverra. Sed bibendum velit ac felis rhoncus volutpat feugiat ut tellus. Praesent mollis malesuada sapien vel feugiat. Vivamus scelerisque, lacus nec blandit sodales, nibh velit volutpat augue, quis vehicula urna justo ac felis. Aliquam erat volutpat. Sed non purus eget erat vulputate varius ac vel urna. Phasellus ac tempor mauris. Morbi ut ligula tristique, fringilla metus quis, pharetra mauris. Nunc non fringilla dui, non varius sem. Quisque ullamcorper, est vitae rhoncus porttitor, sapien urna semper orci, non aliquam lacus ipsum non sem. Phasellus volutpat nibh nulla, eu auctor lacus suscipit eget.</div>
</div>
<footer>footer footer
<br/>
<br/>footer footer
<br/>
<a href="http://google.co.uk">Google link</a>
<br/>footer footer
<br/>
<br/>footer footer
<br/>
<br/>
</footer>
</body>
高度解决方案：
#main {
z-index:4;
padding:0px 0px 450px;
border-bottom:1px solid red;
position: relative;
}
#mainBg {
background:red;
}
footer {
padding: 50px 0;
bottom:0;
position:fixed;
z-index:3;
width:100%;
}
body {
height:1500px;
}<body>
<div id="main">
<div id="mainBg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere, justo eget auctor sagittis, sapien odio rutrum quam, eu feugiat sem lacus lacinia quam. Morbi malesuada porta sapien eu ornare. Pellentesque vel nibh auctor lectus malesuada porttitor. Cras et dui quam. Nunc sollicitudin mi condimentum iaculis rhoncus. Sed tristique mollis sagittis. Fusce bibendum congue augue, nec scelerisque velit egestas viverra. Phasellus a rhoncus leo. In tempor sagittis rhoncus. Ut a risus viverra, ornare lacus non, ornare nisi. Curabitur luctus mauris orci, quis condimentum lacus facilisis a. Nullam cursus, nisl id sagittis feugiat, risus ipsum consequat felis, id luctus erat felis eget velit. Pellentesque vehicula risus at nibh faucibus, in venenatis tellus aliquam. Pellentesque dolor libero, vehicula et magna efficitur, sollicitudin pharetra ipsum. Curabitur tempus et sapien eu facilisis. Phasellus ipsum diam, pellentesque sed felis non, euismod malesuada orci. Nulla rutrum eros in dignissim pretium. Donec et orci leo. Nullam quis luctus massa. Donec rhoncus lacinia cursus. Fusce sed imperdiet ligula. Maecenas fermentum sed velit eget aliquam. Nullam vel ipsum erat. Mauris ultricies feugiat metus, sed scelerisque arcu imperdiet eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum porta felis at pharetra maximus. Curabitur efficitur turpis non interdum finibus. Mauris ut consectetur nisl, eget condimentum sem. Integer rutrum, augue vitae faucibus rutrum, metus tellus volutpat quam, in fermentum arcu risus quis libero. Curabitur faucibus pulvinar tempus. Aenean eu ex ullamcorper, ullamcorper enim a, convallis elit. Cras id facilisis turpis. Nunc urna libero, rhoncus eget blandit id, sollicitudin vitae nibh. Nunc sed nibh faucibus, consequat nibh quis, commodo neque. Nullam porttitor est a dui bibendum, non scelerisque nulla imperdiet. Mauris ut suscipit magna. Aenean magna orci, aliquam nec fringilla ut, blandit ac augue. Aliquam aliquet, metus ut congue varius, massa erat dapibus lectus, sit amet blandit libero tortor eget nibh. Nam tincidunt tristique elementum. Vivamus sagittis nec tellus ut sollicitudin. Vivamus nec lobortis nisl. Proin placerat, orci sed interdum efficitur, libero enim tempor nisl, quis iaculis nisl ligula non dolor. Mauris in felis at justo varius posuere. Nam ac lorem ex. Aliquam convallis ac metus ac condimentum. Aliquam ac ex a lacus placerat rutrum sed a eros. Nunc et tellus at enim rutrum volutpat. Praesent egestas ligula at diam convallis, eget posuere diam vulputate. Cras tempus non nibh eu hendrerit. Aenean erat odio, posuere mattis neque nec, gravida tristique velit. Aenean condimentum massa sed dictum viverra. Sed bibendum velit ac felis rhoncus volutpat feugiat ut tellus. Praesent mollis malesuada sapien vel feugiat. Vivamus scelerisque, lacus nec blandit sodales, nibh velit volutpat augue, quis vehicula urna justo ac felis. Aliquam erat volutpat. Sed non purus eget erat vulputate varius ac vel urna. Phasellus ac tempor mauris. Morbi ut ligula tristique, fringilla metus quis, pharetra mauris. Nunc non fringilla dui, non varius sem. Quisque ullamcorper, est vitae rhoncus porttitor, sapien urna semper orci, non aliquam lacus ipsum non sem. Phasellus volutpat nibh nulla, eu auctor lacus suscipit eget.</div>
</div>
<footer>footer footer
<br/>
<br/>footer footer
<br/>
<a href="http://google.co.uk">Google link</a>
<br/>footer footer
<br/>
<br/>footer footer
<br/>
<br/>
</footer>
</body>
答案 1 :(得分：0)
你的#main包含450px填充底部，所以它就在页脚上方。 尝试在主体上添加450px填充，并将其从#main。
中删除