将Div锁定在有背景的固定位置
Lock Div to fixed position with background
即使我们调整浏览器的大小,我也试图将黄色div元素始终保留在home窗口上,但我无法仅用css实现,因此正在寻找JavaScript解决方案。
这是我的小提琴:http://jsfiddle.net/jj4fxpmy/6/
问题是,当我调整浏览器大小时,黄色方块向上移动。我想把它粘在家里。对我来说,保持背景位置在底部是很重要的:
<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。使用image标记代替背景,并在其中添加黄色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,输出
如果你绝对必须将房屋图像设置为右下角的背景,你可以试着参考这个问题:jQuery-拖动div css背景或者试试这个插件:https://github.com/kentor/jquery-draggable-background
这是我的疯狂想法:
- 创建一个与房屋图像尺寸相同的透明图像,带有一个50x50的黄色框
- 将其设置为与房屋背景具有相同样式/定位的背景
- 将其与引用的溢出问题或Kentor的jquery插件中的jquery连接起来
这样就可以了!
相关文章:
- 在地图加载/页面加载时,我想将地图设置为当前地理位置,但不想在地图上显示定位图标
- JQuery定位:我可以滚动到正确的位置一次,但不能滚动两次
- 如何在jquerymobile中同时放置两个定位的经纬度位置
- Javascript / 根据一个元素的位置定位另一个元素
- 如何定位“隐藏”的 iframe?(应用程序:链接到嵌入“隐藏的海报图像”嵌入的 Youtube 视频的起始位置)
- 与位置的相对定位:绝对
- 在没有“位置”属性的情况下实现绝对定位,使用边距/填充
- 用于相对于用户在约束内单击的位置定位框的数学公式
- 运行地理位置定位的 js 文件
- 如果定位服务关闭,英特尔 XDK 地理位置将找不到纬度/经度
- 在 iPad 上绝对定位不会将元素设置在所需位置
- 如何使用 jQuery 计算相对定位元素的绝对位置*没有*
- 如果php返回位置头,我如何在jquery ajax中定位页面
- 试着根据父母的位置来定位孩子
- 地理定位api没有给出准确的用户位置
- 定位父元素,使子元素处于完全相同的位置
- 如何在Javascript/Mootools中根据页面上不同对象的位置定位箭头
- 使用javascript查找元素相对于最近相对定位的父元素的位置
- 多个谷歌位置请求功能(药房定位器)
- 点击html5地理定位当前位置,然后减去两点