CSS中Position属性

CSS中Position属性详解

首先说一下position的属性值都是相对谁进行定位的
1.position: absolute :生成绝对定位的元素,相对定位的对象可以分为两种情况：

• 相对于最近一级的定位,不是 static 的父元素来进行定位。
• 如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。

2.position: fixed（老IE不支持）生成绝对定位的元素
通常相对于浏览器窗口或 frame 进行定位[fixed元素总是相对于body定位的]

3.position: relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

4.position: static 默认值。没有定位，元素出现在正常的流中

5.position: inherit继承父元素的position属性

注意: IE8以及往前的版本都不支持inherit属性

6.position: sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出【CSS3的新增属性】

今天具体来说一下sticky属性，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

可以知道sticky属性有以下几个特点：

• 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
• 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
• 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量

浏览器兼容性：

总结，让sticky属性生效的条件有以下两点：

1. 当给其父元素设置固定高度后，sticky元素会受制于父元素的高度
2. sticky的元素根据距其最近的父元素高度进行定位