0

好的，我在 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>

我对两个 DIV 都有以下 CSS

#wholePage {
    position: relative;
    width: 1000px;
    padding: 0 10px;
    padding-top: 35px;
    margin: 0 auto;
}
#pageWrapper {
    position: relative;
    width: 960px;
    padding: 0 10px;
    padding-top: 37px;
    margin: 0 auto;
}

顶部阴影的 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，使其位于其正下方？并且不会像在第二个链接上那样基于页面本身进行定位。（在第二个链接上，您可以看到它使用原始间距并超出页面内容）

4

1 回答 1

1

尝试将 的属性设置为 -4px ，而不是设置 的top:属性。这样，您就不会每次都被 1657px 高的页面所束缚。bFbottom:bF

img#bF {
    left: 50px;
    position: absolute;
    bottom: -4px;
    z-index: 2;
}
于 2012-10-09T22:14:33.207 回答