2012-01-05 91 views
0

我希望我能解釋這一點。相對於整個頁面區域的CSS定位

我有一個圖片「卡住」在瀏覽器窗口的右側,所以當瀏覽器窗口更改大小時,它仍然卡在右側。我使用的風格是:

style="position :absolute; top :4px; right :4px" 

我也有1,024像素的最小的車身寬度:

body 
{ 
    min-width: 1024px; 
} 

,直到窗口大小小於1024,則圖像仍然堅持這一切的偉大工程窗口的右側。但我希望它堅持在整個頁面區域的右側。如果你明白我的意思。

謝謝,

AJ

回答

2

的CSS屬性位置基礎上計算一個定位的父。如果你的圖像沒有任何父母定位,那麼絕對將相對於屏幕。你應該能夠通過放置position:relative來解決這個問題。在你身體的css中,或者將所有東西都包含在正確大小的div中,並且位置是:relative;

+0

感謝,包裹在一個div偉大的工作。 – 2012-01-05 16:25:32

0

您可以在包含您的圖像一個div使用position: relative,有一些像這樣的代碼成功:

<div style="position:relative; min-width: 1024px"> 
    <div style="position: absolute; top: 10px; right: 4px; width: 20px; height: 20px; background-color: red"></div> 

    <div style="width: 1024px; margin: auto 0px; height: 400px; background-color: #AAA">&nbsp;</div> 
</div> 

Example here: http://jsfiddle.net/7jafS/