Jquery 相对于窗口上的图像放置的div调整大小（几乎有效）

我有3个“管脚”放在

div

（

#outerdiv

）中。

div

有一个

背景图像

，调整窗口大小时，引脚应始终位于背景图像上的同一点上它与

#pin1

配合使用，但与

#pin2

和

#pin3

不配合使用（使用相同的代码）。唯一的区别是

#pin1

在html中是第一位的

编辑：和代码段（向下滚动）

调整窗口大小时，

#pin1

工作正常（位于背景图像的同一位置）。但是，

#pin2

和

#pin3

以及此后每隔一段时间，都会向下推一点，因此不再位于同一位置。但是，它仍然位于右侧水平轴上

$（文档）.ready（函数（）{
updateProductBg（）；
});
$（窗口）。调整大小（函数（）{
updateProductBg（）；
});
函数updateProductBg（）{
如果（$（窗口）.width（）/$（窗口）.height（）>=2600/1450）{
$（'outerdiv'）.css（{'height'：'100%，'width'：$（window）.height（）*（2600/1450）+'px'，margin left'：-$（'outerdiv'）.width（）/2+'px'，left'：'50%，'top'：'0'，margin top'：0}）；
}否则{
$（'outerdiv'）.css（{'height'：$（window.width（）*（1450/2600）+'px'，'width'：'100%，'margin left'：0'，'left'：0'，'top'：'50%，'margin top'：-$（'outerdiv'）.height（）/2+'px'）；
}
}

#outerdiv{
背景图片：url(https://upload.wikimedia.org/wikipedia/commons/6/6a/Luftaufnahmen_Nordseekueste_2013_05_by-RaBoe_314.jpg);
背景尺寸：包含；
背景重复：无重复；
背景位置：0；
位置：绝对位置；
底部：0；
宽度：100%；
身高：100%；
}
.别针{
背景图片：url(https://upload.wikimedia.org/wikipedia/commons/1/16/WP_SOPA_sm_icon_identica_ffffff.png);
宽度：32px；
高度：33像素；
位置：相对位置；
}

---

您是否尝试将规则

的
位置
更改为
位置：相对

我相信这会有帮助。我目前无法在手机上复制它。由于您没有提供运行的代码示例，因此：：-）
 
.pin
当前设置为
位置：相对这意味着
顶部
和
左侧
将使插针偏离其在页面上绘制的位置。要将它们相对于
#outerdiv
放置，需要将它们设置为
位置：绝对

在原始版本中，
#pin1
可以工作，因为它在移动前在
#outerdiv
的左上角输出。其他两个位置不正确，因为它们的位置受到放置在它们前面的销的影响


$（文档）.ready（函数（）{
updateProductBg（）；
});
$（窗口）。调整大小（函数（）{
updateProductBg（）；
});
函数updateProductBg（）{
如果（$（窗口）.width（）/$（窗口）.height（）>=2600/1450）{
$（'outerdiv'）.css（{'height'：'100%，'width'：$（window）.height（）*（2600/1450）+'px'，margin left'：-$（'outerdiv'）.width（）/2+'px'，left'：'50%，'top'：'0'，margin top'：0}）；
}否则{
$（'outerdiv'）.css（{'height'：$（window.width（）*（1450/2600）+'px'，'width'：'100%，'margin left'：0'，'left'：0'，'top'：'50%，'margin top'：-$（'outerdiv'）.height（）/2+'px'）；
}
}
#outerdiv{
背景图片：url(https://upload.wikimedia.org/wikipedia/commons/6/6a/Luftaufnahmen_Nordseekueste_2013_05_by-RaBoe_314.jpg);
背景尺寸：包含；
背景重复：无重复；
背景位置：0；
位置：绝对位置；
底部：0；
宽度：100%；
身高：100%；
}
.别针{
背景图片：url(https://upload.wikimedia.org/wikipedia/commons/1/16/WP_SOPA_sm_icon_identica_ffffff.png);
宽度：32px；
高度：33像素；
位置：绝对位置；
}

您是否有机会在中为我们展示一个工作示例？很难想象确切的问题。我已经把它转移到为他剪下的代码中。只是需要得到批准谢谢大家。我添加了一个jsfiddle。Ionic添加的那一个似乎不起作用。谢谢，但它必须是“绝对”定位的，因为它通常不在我的页面顶部。只是澄清一下，它是否与
位置：相对
一起工作。如果您愿意，我们可以用另一个包装
div
或
margin
来定位它？不，我认为它不起作用。我正在将我的PIN定位到
绝对
分区的
相对
位置。谢谢，效果非常好！真不敢相信事情竟那么简单。误解了
立场：绝对
实际做的事情。