老师请问，为什么固定左右换成sticky后显示就不对了
来源：4-3 编程练习
慕函数3852583
2019-04-09 22:10:59
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px}
.con{width: 100%;height: 5800px;background: url(http://climg.mukewang.com/59c9f7ce0001839219034033.png) no-repeat center top;background-size: 100%}
.z{width: 200px;height: 300px;}
.y{width: 200px;height: 300px;}
.z{position:sticky;
top: 50%;
right:90px;
margin-top:-150px;
}
.y{position:sticky;
top: 50%;
left: 90px;
margin-top:-150px
}
</style>
<body>
<div class="con">
<div class="z"><img src="http://climg.mukewang.com/5a3383c70001f1b702240364.png" width="100%" height="100%"></div>
<div class="y"><img src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png" width="100%" height="100%"></div>
</div>
</body>
</html>
1回答
-
同学你好！
position: sticky;基于用户的滚动位置来定位。
（1）粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
（2）在目标区域以内，它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
（3）元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。但它的兼容性不是很好！
同学可以给左右两块添加左右浮动，实现对联样式效果。
按照要求，更建议这里使用固定定位，position:absolute;来实现效果！
如果帮助到了你欢迎采纳。
0
相似问题