一个固定定位问题，求大神解答

qingwadaxia_1 2017-12-01 04:35:46

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<style>
*{padding:0;margin:0;}
img{width:100%;}
.aa{width:100%;height:2000px;margin-top: 45px;}
.bb{width:100%;height:45px;position: fixed;top: 0px;z-index: 9999;}
</style>
</head>
<body>
<div class="aa"><img src="http://www.gerenblog.com/images/11.jpg"></div>
<div class="bb"><img src="http://www.gerenblog.com/images/22.jpg"></div>
</body>
</html>

这是手机端网页，想把22.jpg 固定定位在11.jpg上如何才能做到正好无缝对接，就好像下面的图片：

上面那张图才是我想要的最终效果，无论模拟任何尺寸都能保持无缝对接，

但是却怎么改，都会出现下面这两种情况：

在各种尺寸下，表现情况各不一样，有的出现空隙，有的过于紧凑，超过了，

怎样写才能完美兼容各种尺寸呢不知道我说的清不清楚

...全文

175 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

qingwadaxia_1 2017-12-02

打赏
举报

引用 11 楼 jslang 的回复:

其实根本不需要用calc都js，图片比例是固定的，计算出 100/640*79 = 12.34375 直接就可以设置 margin-top: 12.34375%;

真心多谢 window.onresize = function () { setTimeout(getMarginTop, 100); } 这个是根据不同屏幕尺寸，100毫秒内获取向上边距的高度是吗

天际的海浪 2017-12-01

打赏
举报

其实根本不需要用calc都js，图片比例是固定的，计算出 100/640*79 = 12.34375 直接就可以设置 margin-top: 12.34375%;

qingwadaxia_1 2017-12-01

打赏
举报

引用 9 楼 qingwadaxia_1 的回复:

[quote=引用 8 楼 jslang 的回复:] 再有就是通过js设置margin-top


<style>
*{padding:0;margin:0;}
img{width:100%;}
.aa{width:100%;height:2000px;}
.bb{width:100%;position: fixed;top: 0px;z-index: 9999;}
</style>
 </head>
 <body>
  <div id="aa" class="aa"><img src="http://www.gerenblog.com/images/11.jpg"></div>
  <div class="bb"><img id="bbimg" src="http://www.gerenblog.com/images/22.jpg"></div>
<script type="text/javascript">
function getMarginTop() {
	var aa = document.getElementById("aa");
	var bbimg = document.getElementById("bbimg");
	aa.style.marginTop = bbimg.offsetHeight+"px";
}
window.onload = getMarginTop;
window.onresize = function () {
	setTimeout(getMarginTop, 100);
}
</script>

多谢大神分给您了[/quote]window.onresize = function () { setTimeout(getMarginTop, 100); }不过这个定时器是做什么用的呢为什么要开这个东西呢

qingwadaxia_1 2017-12-01

打赏
举报

引用 8 楼 jslang 的回复:

再有就是通过js设置margin-top


<style>
*{padding:0;margin:0;}
img{width:100%;}
.aa{width:100%;height:2000px;}
.bb{width:100%;position: fixed;top: 0px;z-index: 9999;}
</style>
 </head>
 <body>
  <div id="aa" class="aa"><img src="http://www.gerenblog.com/images/11.jpg"></div>
  <div class="bb"><img id="bbimg" src="http://www.gerenblog.com/images/22.jpg"></div>
<script type="text/javascript">
function getMarginTop() {
	var aa = document.getElementById("aa");
	var bbimg = document.getElementById("bbimg");
	aa.style.marginTop = bbimg.offsetHeight+"px";
}
window.onload = getMarginTop;
window.onresize = function () {
	setTimeout(getMarginTop, 100);
}
</script>

多谢大神分给您了

天际的海浪 2017-12-01

打赏
举报

再有就是通过js设置margin-top


<style>
*{padding:0;margin:0;}
img{width:100%;}
.aa{width:100%;height:2000px;}
.bb{width:100%;position: fixed;top: 0px;z-index: 9999;}
</style>
 </head>
 <body>
  <div id="aa" class="aa"><img src="http://www.gerenblog.com/images/11.jpg"></div>
  <div class="bb"><img id="bbimg" src="http://www.gerenblog.com/images/22.jpg"></div>
<script type="text/javascript">
function getMarginTop() {
	var aa = document.getElementById("aa");
	var bbimg = document.getElementById("bbimg");
	aa.style.marginTop = bbimg.offsetHeight+"px";
}
window.onload = getMarginTop;
window.onresize = function () {
	setTimeout(getMarginTop, 100);
}
</script>

天际的海浪 2017-12-01