Question

如果有一个div说

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

当以不同的屏幕分辨率观看时，94％开始向右滑动，这是正常行为。

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");

我在窗口首次加载时计算出来，并将按钮移动到百分比值移动到的完全相同的位置。

我做错了什么？任何Takers。

Answer 1

你无法用百分比绝对定位div，并期望它在每个屏幕中表现相同。由于您使用的是百分比，因此该值将与屏幕大小成比例。 1000的94％不同于1500的94％。

您可以设置正确的属性而不是左侧，例如：

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

您还可以根据页面的当前宽度在页面加载事件中计算此值，这样即使调整窗口大小，也可以保证位置相同。

百分比位置CSS / Javascript

1 个答案: