前天深信服面试被问到这个问题，没想到天天用的属性被问到了，一紧张起来还是说不清楚，确实暴露了我在这方面的问题——对绝对定位和相对定位都没搞清楚。这样就去面试了，实在是耻辱面试。今天写一篇博客把这个知识点弄清楚吧。
封面
1、position 属性的取值
一共有五种：
- static （默认值）
- relative （相对定位）
- absolute （绝对定位）
- fixed （固定定位）
- sticky （粘性定位）
static(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。
还有一种 inherit，意为继承父元素的 position 属性
2、相对定位
相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移。如：
<div class="box" id="one">One</div><div class="box" id="two">Two</div><div class="box" id="three">Three</div><div class="box" id="four">Four</div>
<style>
.box {
display: inline-block;
width: 100px;
height: 100px;
background: red;
color: white;
}
.two {
position: relative;
top: 20px;
left: 20px;
background: blue;
}
</style>
#two {
position: relative;
top: 20px;
left: 20px;
background: blue;
}
3、绝对定位
相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。布置文档流中其它元素时，绝对定位元素不占据空间。
position: absolute 绝对定位元素相对于最近的非 static 祖先元素定位。
当这样的祖先元素不存在时，则相对于最初的包含块定位。
4、固定定位
固定定位与绝对定位相似，但元素相对于 viewport（视口）定位。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。
position: fixed 可以简单说fixed是特殊版的absolute，fixed元素总是相对于body定位的。
5、粘性定位
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。
设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
sticky属性有以下几个特点：
- 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
- 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。
- 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于 viewport 来计算元素的偏移量
简单来说，就是当粘性定位的元素在页面位置小于设定的阈值时，元素视为position:fixed ，当元素位置大于此阈值时，元素视为position: relative，而且设置的top等属性失效。
效果
比如设置top:20px，即意为元素距离视口顶部距离不能小于 20px，否则元素就进入固定定位状态。
以上就是本篇博客中关于 CSS 中 position 属性的所有内容，希望下次面对这个知识点不会被问得说不清楚了，实在是太丢人了。
风景
网友评论