css中关于position属性值和sticky剖析

css样式中的position到底有几种属性值？常用的就三种relative，absolute，fixed，但是作为一名专业的人员别人问你position有那些属性值，只说三种是不行的，应该把他所有存在的属性值都列出来，有以下7种：

属性值	属性值使用描述
static	默认值,元素出现在文档流正常的地方
absolute	绝对定位当前元素，相对于第一个非static定位以外的第一个父元素进行定位，以left，right，top，bottom进行定位
relative	相对定位当前元素，相对于其正常出现的位置进行定位，如left:20px,就是相对原始位置向左移动20像素
fixed	生成相对视窗定位的元素，将当前元素相对于浏览器窗口进行定位。元素的位置通过 “left，top，right，bottom” 属性进行确定位置
sticky	粘性定位，在当前定位的元素的父元素可见时，父元素区域内固定位置，ps:下面会展开详细解读一下
inherit	从父元素继承 position属性值
initial	设置该属性为默认值

sticky：粘性定位，乍一看不好明白，举个例子就懂了：

	

	

	

		

			我是sticky box
		
		

			我是fixed box
		
	

css

可以看到当sticky定位的元素在当前父元素滚动范围内会像fixed定位一样，超出其父元素后则会回到初始位置。

从上向下，从第一个容器向下滚动的时候：

进入sticky父元素前：


sticky对象的父元素滚动区域内：

一直滚动底部：

从下向下上，从第二个容器向上滚动的时候：

超出sticky元素的父元素滚动边界了，所以sticky回到初始位置

okay…就这样