调整页脚图像以使其偏移10像素？

Question

我的网页有一个静态页眉和页脚，对于我的顶部徽标/图像，图像悬垂10像素，这是我想要它做的，但是我的底部图像挂在屏幕的末端，我希望它是一个负偏移量，这样图像的顶部比页脚高出10个像素.

如果你检查图像

你可以看到它现在的样子(绿色=正确，红色=不正确)

如果你检查图像

你可以看到这就是它应该是什么样子，图像悬垂在两个静态条上。

JSFiddle

我一直在摆弄的css中，它起作用的部分是：

#footer_container {
    background: #262A2D url('gradhead.png') repeat-x;
    border: 0px solid #666;
    bottom: 0;
    height: 80px;
    left: 0;
    position: fixed;
    width: 100%;
}

#footer {
    position: relative;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    text-align: center;
    color: #ECECEC;
}

#footer .footimage {
}

如果我在top: -10px; css中加上一个#footer，所有的偏移量--这不是我想要的那样--修复了主图像，但是其他的东西都向上移动.

Answer 1

将其添加到CSS声明中：

#footer .footimage {
    position: relative;
    top: -10px;
}

请参阅jsFiddle

Answer 2

您可以很容易地将图像在页脚中的位置向上移动10 up，这是因为您知道需要的偏移量。

#footer .headimager {
    position: relative;
    top: -10px;
}

这里有把小提琴。http://jsfiddle.net/dPLWE/

Answer 3

添加到您的底部img

{position: absolute; bottom: 0;}

但是，如果您想让它与屏幕对齐，则必须将其与JS对齐。