1，绝对定位问题
1，绝对定位元素的特性
display默认为block。所以行内元素设置绝对定位后可直接设置宽高。- 脱离文档流，所以
margin: auto失效。 - 绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于 ICB（initial containing block，初始包含块）。
2，初始包含块问题
如果参考系是初始包含块，则
设置 top 时，参考点是页面顶部，而不是浏览器首屏顶部。
设置 bottom 时，参考点是浏览器首屏的底部，而不是页面的底部。
所以有这么一道经典面试题，大家品一下：
2，粘性定位
一句话总结：可以认为是相对定位和固定定位的混合，定位元素在滚动到某个阈值之前表现为相对定位，之后表现为固定定位。
先看下实际应用：
实现起来也比较简单，只需要给粘性定位元素一个 top 值即可。当定位元素距离浏览器视口顶部到达 top 值后，就表现为固定定位。
扫描二维码关注公众号，回复：
17134413 查看本文章
举例：
<head>
<style>
* {
margin: 0;
padding: 0;
}
.header {
height: 200px;
background-color: seagreen;
}
.sticky {
position: sticky;
top: 20px;
width: 50px;
height: 50px;
background-color: salmon;
}
.content {
height: 800px;
background-image: linear-gradient(#e66465, #9198e5);
}
</style>
</head>
<body>
<div class="header">顶部其他元素</div>
<div class="sticky"></div>
<div class="content"></div>
</body>
注意点：
- 至少得指定
top,right,bottom,left其中之一，才可使粘性定位生效。否则其行为与相对定位相同。 - 和其他定位一样，
top优先级大于bottom，left优先级大于right - 粘性定位元素的包含块，设置
overflow: hidden;会使粘性定位失效。
以上面的例子来说，下面的写法就会使粘性定位失效。
<head>
<style>
.box {
position: relative;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
<div class="header">顶部其他元素</div>
<div class="sticky">one</div>
<div class="content"></div>
</div>
</body>
以上。