讲的有点不明白，这里为什么呢？
来源：2-15 position-sticky（了解即可）
shine62
2019-02-26 12:49:18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.logo{height:100px;width:100%;background-color: yellow;}
.nav{height:50px;width: 100%;background-color: green;
position: sticky;
bottom:10px;}
p{font-size: 30px;}
.content{height:150px;overflow: scroll;position: relative;}
</style>
</head>
<body>
<div class="logo">想象我是网站的头图</div>
<div class="content">
<p>一堆文字一堆文字一堆文字12322222222222222222222222222222一堆文字一堆文字一堆文字一堆文字一堆文字一堆文字一堆一堆文字一堆文字一堆文字12322222222222222222222222222222一堆文字一堆文字一堆文字一堆文字一堆文字一堆文字一堆>文字一堆文字一堆文字12322222222222222222222222222222一堆文字</p>
<div class="nav">想象我是导航栏</div>
<p>一堆文字一堆文字一堆文字12322222222222222222222222222222一堆文字一堆文字一堆文字一堆文字一堆文字一堆文字一堆一堆文字一堆文字一堆文字12322222222222222222222222222222一堆文字一堆文字一堆文字一堆文字一堆文字一堆文字一堆>文字一堆文字一堆文字12322222222222222222222222222222一堆文字一堆文字一堆文字一堆文字一堆文字一堆文字></p>
<p>一堆文字一堆文字一堆文字12322222222222222222222222222222一堆文字一堆文字一堆文字一堆文字一堆文字一堆文字</p>
<p>一堆文字一堆文字一堆文字12322222222222222222222222222222一堆文字一堆文字一堆文字一堆文字一堆文字一堆文字</p>
<p>一堆文字一堆文字一堆文字12322222222222222222222222222222一堆文字一堆文字一堆文字一堆文字一堆文字一堆文字</p>
<p>一堆文字一堆文字一堆文字12322222222222222222222222222222一堆文字一堆文字一堆文字一堆文字一堆文字一堆文字</p>
</div>
<p>爱你一堆>文字一堆文字一堆文字12322222222222222222222222222222一堆文字一堆文字一堆文字一堆文字一堆文字一堆文字></p>
<p>一堆文字一堆文字一堆文字12322222222222222222222222222222一堆文字一堆文字一堆文字一堆文字一堆文字一堆文字一堆一堆文字一堆文字一堆文字12322222222222222222222222222222一堆文字一堆文字一堆文字一堆文字一堆文字一堆文字一堆>文字一堆文字一堆文字12322222222222222222222222222222一堆文字一堆文字一堆文字一堆文字一堆文字一堆文字></p>
<p>一堆文字一堆文字一堆文字12322222222222222222222222222222一堆文字一堆文字一堆文字一堆文字一堆文字一堆文字一堆一堆文字一堆文字一堆文字12322222222222222222222222222222一堆文字一堆文字一堆文字一堆文字一堆文字一堆文字一堆>文字一堆文字一堆文字12322222222222222222222222222222一堆文字一堆文字一堆文字一堆文字一堆文字一堆文字></p>
</body>
</html>
我这里设置的是bottom:10px;以content底部为准线，于是导航栏距离底部10px；滚动窗口时，慢慢的为什么导航栏会发生移动？即不是固定在距离底部的10px处了，这里如何寻找定位，感觉还是不明白老师您看下？
还有就是为啥要给content定位为相对定位呢，感觉这里没什么用呢？
1回答
-
Steve007
2019-02-26
同学，你好。
这里设置bottom为10px之后，相对的是向上滚动的吸附效果，所以向下滚动时，是没有效果的，导航栏是会发生偏移的，设置top时，相对的是向下滚动的吸附效果，所以向上滚动时，也是没有效果的，导航栏也是会发生偏移的。
sticky是相对于它的已经定位的父元素进行定位的，因此这里content要设置relative。
祝学习愉快！
0h019-02-26
相似问题