相對高度和寬度，但絕對定位x，y

Question

我有一個巨大的水平滾動網站。作爲一個例子，可以考慮一個Mario World。每個「資產」都是絕對定位的。

我想有項目的大小（高度和寬度）是相對於瀏覽器的視窗（所以使用百分比），但需要定位用實際像素從左邊等項目

當我這樣做顯然是在調整瀏覽器窗口大小時正確調整了資源的大小。但是這些項目的位置是以像素爲單位的，所以相對於背景而言，它們的位置不合適。

有沒有簡單的CSS解決這個問題？使用百分比來定義位置（例如左邊：50％）並不是一個很好的解決方案，因爲它不是很準確（見下面的jsfiddle）。或者我應該看看使用JS的resize事件並做某些事情？如果是這樣，怎麼樣？

我不確定我現在是否有意義..所以讓我知道是否有任何問題。

編輯

這裏有一個的jsfiddle：http://jsfiddle.net/BZ77t/

注意，當你調整窗口的大小，黑色塊（#blockpx）使用像素定位和調整過程中，以不影響。然而，紅色塊（#blockpercentage）的大小和位置使用百分比來實現我想要的效果：堅持預期的位置（這是背景圖像的位置）。然而，這並不是真的準確 - 在這個例子中這並不重要，但是在一個更大的設置（更寬的寬度）中，差異變得相當高。

Answer 1

的解決方案是使用一個包含元素和JavaScript的組合： http://jsfiddle.net/KaaXg/3/

這撥弄包括此javascript功能：

$(document).ready(function(){ 
    $(".container").css("width", $(".image").width());   
    $(window).resize(function(){ 
     $(".container").css("width", $(".image").width());   
    }); 
}); 

這裏要注意的最重要的事情是left和width值正在計算相對於body元素，這是意想不到的。

爲了解決這個問題，我們添加了一個包含圖片和其他div標籤的元素，用於頁面上的紅色塊圖形。

但是，如果沒有javascript，那麼left屬性仍然只在窗口重新調整大小後重新加載頁面時「更新」。塊級元素不會自行進行水平更新。

因此，您希望left和width與背景圖像成比例，但它們不會更新，因爲頁面調整大小或僅使用CSS移動。上面的JavaScript解決方案會在頁面調整大小時動態更新包含元素的寬度，從而解決此問題。

我只剩下bottom和height css樣式，因爲它們按照你的網站的目的工作，容器的高度增長以適應其中的圖像。

我不完全確定你想要對頁面上的固定像素黑色塊做什麼，所以我把它保持原樣。

編輯：我認真檢查了這個項目，做了一個對象工廠來創建新圖形並更新了頁面的代碼。這個解決方案几乎不需要HTML或CSS，只需要更多的JavaScript代碼，但是可以更容易地在頁面上實現動態圖形/添加新元素。 http://jsfiddle.net/RnCWN/9/

我想出了這裏的JavaScript的解決方案使用實時更新的百分比來設置基於百分比塊的width和left屬性，以及初始化靜態height和bottom屬性。

通過此版本，您可以使用方法PercentageBasedGraphic在頁面上創建一個浮動框。下面是一個例子：

PercentageBasedGraphic(25, 10, 4, 30, "block1"); 

該功能將添加一個div與id = "block1"屬性，與對應width，height，left，和bottom值（所有的百分比）。它還返回一個對象，其中包含調整和重新定位剛創建的div所需的所有信息。你可以很容易通過添加不同的類到每個div擴展此功能。無論如何，我們最終如何利用我們返回的對象？

addGraphic(graphicArr, PercentageBasedGraphic(25, 10, 4, 30, "block1")); 

的addGraphic函數將每一個新的浮箱爲數組。稍後，我們通過調整窗口大小來遍歷該數組，以重新定位我們定義的所有浮動框。

我會誠實地告訴你，超級馬里奧的圖形使這個工作很有趣。

Answer 2

，你可以嘗試檢查老之間（調整前）和新（後），寬度和高度的窗口的差異，使用這種差異來改變底部和左側位置：

$(document).ready(function(){ 
    var width = $(window).width(); 
    var height = $(window).height(); 
    var blockLeft = parseInt($('#blockpx').css('left')); 
    var blockBottom = parseInt($('#blockpx').css('bottom')); 
    $(window).resize(function(){ 
     var difWidth = width - $(this).width(); 
     var difHeight = height - $(this).height(); 
     if (difHeight>0) { 
      $('#blockpx').css('bottom',blockBottom-difHeight + 'px'); 
     } else { 
      $('#blockpx').css('bottom',blockBottom+difHeight + 'px'); 
     } 
     if (difWidth>0) { 
      $('#blockpx').css('left',blockLeft-difWidth + 'px'); 
     } else { 
      $('#blockpx').css('left',blockLeft+difWidth + 'px'); 
     } 
    }); 
}); 

試穿jsfiddle。

這是一個jQuery變體，你可以使用普通的javascript來做同樣的事情。