定位基於一個DIV在另一個DIV內的圖像

好吧我遇到了一個小問題，在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>

我有兩個的DIV

#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以下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，使其位於其正下方？並不像第二個鏈接那樣基於頁面本身進行定位。（在第二個鏈接，你可以看到它使用了原來的間距和超出頁面內容）

來源

2012-10-09 Interfaith

你不應該在你的例子中使用無效標記，因爲它可能會導致混淆。 – Daedalus

這只是我解決這個問題。我計劃爲將來的編輯提供有意義的名稱。感謝您的反饋也一樣。 – Interfaith

而不是設置的bF的top:屬性，嘗試設置的bF的bottom:屬性-4px。這樣你就不會被綁在你的頁面上，每次都是1657px。

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

來源

2012-10-09 22:14:33 keithwyland

簡單回答簡單解決方案!!!謝謝！那工作得很好。 – Interfaith

定位基於一個DIV在另一個DIV內的圖像

回答

相關問題