【面经】CSS 中的 position 属性

前天深信服面试被问到这个问题，没想到天天用的属性被问到了，一紧张起来还是说不清楚，确实暴露了我在这方面的问题——对绝对定位和相对定位都没搞清楚。这样就去面试了，实在是耻辱面试。今天写一篇博客把这个知识点弄清楚吧。

封面

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 属性的所有内容，希望下次面对这个知识点不会被问得说不清楚了，实在是太丢人了。

风景