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：粘性定位，乍一看不好明白，举个例子就懂了：

<div>
	<div class="wrap"></div>
	<hr/>
	<div class="wrap">
		<div id="stickyBox">
			我是sticky box
		</div>
		<div id="fixedBox">
			我是fixed box
		</div>
	</div>
</div>

css

<style>
.wrap{
	width: 100%;
	height: 301.25rem;
	background-color: antiquewhite;
}

#stickyBox{
	position: sticky;
	top: 50px;
	width: 200px;
	height: 60px;
	background-color: aqua;
	margin: auto;
}

#fixedBox{
	position: fixed;
	right: 100px;
	bottom: 100px;
	width: 60px;
	height: 60px;
	background-color: aqua;
}
</style>

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

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

进入sticky父元素前：


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

一直滚动底部：

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

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

okay…就这样