0

OK、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;
}

このページの2つの例を以下に示します。

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

下の影の画像をpageWrapperDIVと一致するように位置合わせして、その真下に配置するにはどうすればよいですか？2番目のリンクのように、ページ自体に基づいて配置することはありません。（2番目のリンクでは、元の間隔を使用し、ページのコンテンツを超えて拡張されていることがわかります）

4

1 に答える 1

1

top:のプロパティを設定する代わりに、のプロパティを -4pxにbF設定してみてください。そうすれば、毎回ページの高さが 1657 ピクセルになることに縛られることはありません。bottom:bF

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