Javascript 用背景将Div锁定到固定位置

即使我们调整了浏览器的大小，我也试图将黄色div元素始终保持在house window上，但我无法仅用css实现它，所以我正在寻找JavaScript解决方案

这是我的小提琴：

问题是，当我调整浏览器的大小时，黄色方块向上移动。我想把它粘在房子上。保持背景位置在右下角对我来说很重要：

<div class="background"></div>
<div style="position: fixed; background: none repeat scroll 0% 0% gold; top: 50%; z-index: 2147483647; height: 50px; width: 50px; left: 79%;" id="square"></div>

.background{width:100%;height:100%;top:0%;left:0%;position:fixed;
 background:url(http://wallpapers.7savers.com/seasons---summer-wallpapers_1146_1920x1200.jpg) no-repeat; background-color:transparent; background-position:right bottom; background-size:100%;

.背景{宽度：100%；高度：100%；顶部：0%；左侧：0%；位置：固定；
背景：url(http://wallpapers.7savers.com/seasons---summer-wallpapers_1146_1920x1200.jpg)无重复；背景颜色：透明；背景位置：右下；背景大小：100%；

---

任何帮助都将不胜感激。

您只需CSS即可实现这一点，无需添加js。使用图像标记代替背景，并在其内部添加黄色div。您可以参考下面的代码

请参阅HTML

---

您可以参考此

如果您必须将房屋图像设置为位于右下角的背景，您可以尝试参考此问题： 或者试试这个插件：

这是我疯狂的想法：

使用50x50黄色框创建与房屋图像尺寸相同的透明图像

将其设置为与房屋背景具有相同样式/位置的背景

将它与引用的溢出问题或Kentor的jquery插件中的jquery连接起来

…这就够了

  <img src="http://wallpapers.7savers.com/seasons---summer-wallpapers_1146_1920x1200.jpg" alt="">
  <div>
  <div class="yellow-div" id="square"></div>
  </div>
</div>

.background{
  width:100%;
  height:auto;
  top:0%;
  left:0%;
  position:fixed;
}
.background img{
width:100%;
}

 .yellow-div{
background: none repeat scroll 0 0 gold;
    height: 3.1%;
    position: absolute;
    right: 18.1%;
    top: 68.9%;
    width: 1.6%;
}