百分比排名CSS / Javascript

Question

如果讓div說

<div style="position:absolute;top:0%;left:94%;width:40px;height:40px;"/>

在不同的屏幕分辨率下觀看時，94％開始向右滑動，這是正常現象。

div是相對於文檔的，所以當窗口調整大小時，我希望它與窗口一起移動。

我希望我有道理。 就像我現在所擁有的那樣，它保持在我放置它的位置附近，但是隨着屏幕變大或以更高的分辨率查看文檔時，它開始移動。

問題 ：當屏幕尺寸/分辨率改變時，如何將div絕對用百分數定位並保持在正確的位置。

編輯：這是我想要做的。 我正在編寫一個應用程序，用戶可以在其中從工具箱中選擇某些項目，並將其拖放到類似於Visual Studio的窗口中，除非結果不是其HTML頁面的形式。 我做了所有這些工作，一切正常。 當我開始在不同的屏幕和分辨率上進行測試時，我的問題就開始了，最終結果始終不同於用戶用來創建html頁面的屏幕。 除了相對的主要內容區域外，頁面中的所有內容都是絕對定位的，它包含所有絕對定位的項目。

我嘗試過的是屏幕上項目的剩余值和最高值的百分比，這就是導致我最初提出問題的原因，在計算自己的值的建議下，我嘗試了

var currH = $(window).height();
var currW = $(window).width();

var rW = currW / OrgWidth; //Orignal Width of the window when the item was placed

var rH = currH / OrgHeight; //Orginal height of the window when the item was placed 

var x =$("#Button_Tools").offset().left * rW;
var y =$("#Button_Tools").offset().top * rH;

$("#Button_Tools").css("left", x.toString() + "px");
$("#Button_Tools").css("top", y.toString() + "px");

我在窗口首次加載到該窗口時將其計算出來，然后將按鈕移到百分比值所移到的位置上。

我究竟做錯了什么？ 任何人。

Answer 1

您不能將div絕對地用百分數定位，並期望它在每個屏幕中的表現都相同。 由於您使用百分比，因此該值將與屏幕尺寸成比例。 1000的94％與1500的94％不同。

您可以設置right屬性而不是left屬性，例如：

<div style="position:absolute;top:0%;right:20px;width:40px;height:40px;"/>

您還可以根據頁面的當前寬度在頁面加載事件中計算該值，這樣即使在調整窗口大小時，也可以保證位置相同。