我正在尝试将这个设计 (http://revivelab.com/demo_sites/bookthatcondo/) 变成一个 wordpress 主题，你会注意到页脚有 'position:absolute;bottom:0;top:1500px;'在上面。 1500px 是我需要更改的，因为我不想指定每个页面唯一的顶部位置。它上面的 div 是绝对的，因此它们可以分层以获得波浪/滑块效果。
有人对如何实现这一目标有任何建议或技巧吗？我是否必须对网站的其余部分使用绝对定位来实现这些“层”？
【问题讨论】：
标签： css html position footer absolute
好的，所以我找到了一种方法来做到这一点......这可能有点令人困惑，但它确实有效：
您需要找到 id 为 canvas 的 div。用给定新 id 的新 div 包装该 div 内的所有内容（而不是 div 本身）（即 canvas2）。那么你应该有这样的东西：
<div id="canvas">
<div id="canvas2">
<!-- all the other code here -->
</div>
</div>
完成后，您需要将整个页脚放在<div id="canvas"> 内，您现在应该拥有的样子
<div id="canvas">
<div id="canvas2">
<!-- all the other code here -->
</div>
<div style="<!--Your footer styles here -->">
<!-- footer content here -->
</div>
</div>
在你这样做之后，你的网站会看起来很乱。但那是因为我们需要移动一些 css 属性。
现在你的页脚使用inline styling，看起来像这样：
style="width:100%;height:269px; background-image:url(img/footer_Wave.png); background-position:50% 0%; background-repeat:no-repeat; position:absolute;bottom:0;top:1500px;"
如果您想继续使用内联样式，只需将其更改为：
style="width:100%;height:269px; background-image:url(img/footer_Wave.png); background-position:50% 0%; background-repeat:no-repeat; margin-top:50px"
接下来，您的 #canvas div 应用了以下样式：
#canvas {
width: 1024px;
height: 1000px;
position: absolute;
z-index: 5000;
left: 50%;
margin-left: -512px;
}
改成这样：
#canvas {
width: 100%;
position: absolute;
z-index: 5000;
}
最后，给#canvas2这些样式：
#canvas2 {
width: 1024px;
margin:auto;
}
这应该为每个页面修复它。它看起来有很多变化，但实际上并没有太大变化。希望这会有所帮助
【讨论】：
您绝对不必指定要让页脚停留在底部多长时间。
改用Sticky Footer。它使用负数margin-top，因此您只需要知道页脚高度，而不是实际页面的高度。如果您有很多不同的页面高度，这真的很有帮助。
【讨论】：