Html 基于一个DIV在另一个DIV中定位图像

好的，我在将图像定位到DIV中时遇到了一个小问题

<div id="wholePage">
     <img src="theImages/header_shadow_flip.png" id="hF" />
     <div id="pageWrapper"><img src="theImages/header_shadow.png" id="bF" />
     </div>
</div>

顶部阴影的CSS，效果很好。无需更改，即：

img#hF {
    position: absolute;
    left: 50px;
    top: 56px;
    z-index:2;
}

但底部页脚图像给了我一个问题，css是：

img#bF {
    position: absolute;
    left: 50px;
    top: 1657px;
    z-index:2;
}

本页的两个示例如下：

www.interfaithmedical.com/CheckSite/index.html
www.interfaithmedical.com/CheckSite/ms_gynecology.html

---

如何对齐底部阴影图像以匹配pageWrapper DIV，使其位于其正下方？并且不会像在第二个链接上那样基于页面本身进行定位。（在第二个链接上，您可以看到它使用原始间距并延伸到页面内容之外）

请尝试将

bF

的

top:

属性设置为-4px，而不是将

bF

的

bottom:

属性设置为-4px。这样你就不会每次都被1657px高的页面束缚住

img#bF {
    left: 50px;
    position: absolute;
    bottom: -4px;
    z-index: 2;
}

---

你不应该在你的例子中使用无效的标记，因为它会导致混乱。这只是在我解决这个问题之前。我计划给未来的编辑有意义的名字。同样感谢您的反馈。

img#bF {
    left: 50px;
    position: absolute;
    bottom: -4px;
    z-index: 2;
}