Javascript HTML CSS页脚在定位时做了一些奇怪的事情

我试图使页脚与内容一起移动。它工作，但它做了一些非常奇怪的事情。当我将页脚的位置设置为“相对”时，页脚会随内容移动，但会破坏背景图像，如下图所示。若我把它设置回绝对，它会恢复正常，但不会随着内容移动

看起来底部的div不会覆盖其他内容

HTML:

带位置的图像：绝对

带位置的图像：相对

---

只需将div向上移动一点：top和z-index。只有z索引不在顶部时才使用

div.bottom
{
    height:78px;
    width: 100%;
    background-color:white;
    background-repeat: repeat-x;
    background: url(images/bottom.png);
    position:relative;
    bottom:0;
    left:0;
    top:-15px;
    z-index:2;
}

---

在页脚上使用相同的

position:absolute

，在

.content

上使用相同的

填充底部如何

div.content {
    padding-bottom: 78px;//height of the footer
}

当你说你希望“页脚随内容移动”是什么意思？将元素设置为position:relative在这里显示的实现中没有实际效果。将元素设置为position:absolute会使其脱离文档的正常流程，导致其他元素在计算其位置时忽略它。这就是我的意思。当我向页面添加内容（更多文本）时，它必须向下移动页脚（让路）。否则文本将重叠。调试时，我要做的是将“border:1px solid”添加到div或任何其他元素中，这样我就可以准确地看到它们的开始和结束位置，它们可能重叠的位置，等等。这就容易多了。沿着这些路线？是的，只有当我这样做的时候，我的页脚才会像上面的图片那样做一些奇怪的事情。不知怎的，在我的页脚后面出现了一条白色的条纹，在底部留下了一条页脚无法覆盖的白线。另外，那条白线使页脚的背景看起来不好（被冲洗了）。调整高度超过78px，或者，向下移动上方的div，不管是哪种方式。为了工作，我必须在Photoshop中重新创建更高的图像（原始图像只有78px）。我相信有更好的方法解决我的问题。请检查我的代码，看看是否可以找到正确的实现。我无法理解。更新了答案。请检查此答案是否回答了您的问题。然后页脚将漂浮在内容上，并且不再随内容移动。如果我将页脚设置为绝对值，那么它将以固定位置浮动在内容上。如果我将其设置为“相对”，它将不再漂浮在网页背景等其他元素上，而是将其向上推并放置在底部，创建一个白色背景。那么您希望固定页脚吗？滚动时，它必须保持在底部是吗？你能在线上传图片并在
jsfidle
中使用它们让我看看你到底有什么问题吗？现在我不知道你需要什么：）谢谢。
div.bottom
{
    height:78px;
    width: 100%;
    background-color:white;
    background-repeat: repeat-x;
    background: url(images/bottom.png);
    position:relative;
    bottom:0;
    left:0;
    top:-15px;
    z-index:2;
}

div.content {
    padding-bottom: 78px;//height of the footer
}