将 Div 锁定到具有背景的固定位置答案

【问题标题】：Lock Div to fixed position with background将 Div 锁定到具有背景的固定位置
【发布时间】：2015-02-19 23:51:50
【问题描述】：

即使我们调整浏览器的大小，我也试图将黄色 div 元素始终保持在房屋窗口上，但我无法仅使用 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%;

任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

只需CSS即可实现，无需添加js。使用图像标签而不是背景并在其中添加黄色 div。你可以参考下面的代码。

查看 HTML

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

查看 CSS

.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%;
}

你可以参考这个http://jsbin.com/pacewepari/2/edit?html,css,output

【讨论】：

【解决方案2】：

如果您绝对必须将房屋图像设置为位于右下角的背景，您可以尝试参考以下问题： jQuery - drag div css background 或者试试这个插件： https://github.com/kentor/jquery-draggable-background

这是我的疯狂想法：

创建一个与房屋图像尺寸相同的透明图像，带有一个 50x50 的黄色框。
将其设置为与房屋背景具有相同样式/定位的背景。
在提到的溢出问题或 Kentor 的 jquery 插件中将其与 jquery 挂钩

...应该这样做！

【讨论】：