即使我们调整浏览器的大小,我也试图将黄色的 div 元素始终保持在主窗口上,但我无法仅使用 css 实现它,因此正在寻找 JavaScript 解决方案。
这是我的 fiddle :http://jsfiddle.net/jj4fxpmy/6/
问题是当我调整浏览器大小时黄色方 block 向上移动。我想让它粘在房子上。保持背景位置在右下角对我来说很重要:
<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%;
任何帮助将不胜感激。
最佳答案
只用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%;
}
关于javascript - 将 Div 锁定到带背景的固定位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28619300/