主要介绍 position 属性值 - sticky，中文意思是“黏性的”， position:sticky 黏性定位

简介

sticky 属性值的设计的初衷就是把原来 JavaSctipt 才能实现的黏性效果改由css实现，效果常用语导航元素上

案例

			button {
				width: -webkit-fill-available;
				width: -moz-available;
				width: stretch;
				margin-left: 15px;
				margin-right: 15px;

				position: sticky;
				top: 0;
			}

			.table {
				width: 100%;
				height: 50vh;
			}
		<div style="height: 500vh;">
			<button type="button">asd1</button>
			<div class="table"></div>
			<button type="button">asd2</button>
			<div class="table"></div>
			<button type="button">asd3</button>
			<div class="table"></div>
			<button type="button">asd4</button>
			<div class="table"></div>
			<button type="button">asd5</button>
			<div class="table"></div>
			<button type="button">asd6</button>
			<div class="table"></div>
		</div>

兼容性

1. ie 不支持
2. Edge 16+
3. Firefox 32+
4. Chrome 56+
5. Safari 6.1+
6. ios Safari 6+
7. Android Browser 5+

黏性定位与固定定位

以前通过 js 计算滚动的位置，让 position 属性的值在 relative 和 fixed 之间切换来实现，因此，很多开发者误认为黏性定位就是相对定位和绝对定位的结合体，但两者是没有任何关系，黏性定位是相对定位的延伸

与相对定位相似的地方

1. 元素发生偏移的时候，元素的原位置是保留的
2. 创建了新的绝对定位包含块，也就是黏性定位元素里面如果有绝对定位的子元素，那个子元素设置 left/top/right/bottom 属性时的偏移计算是相对于当前黏性定位元素
3. 支持设置 z-index 属性值来改变元素的层叠顺序

黏性定位和相对定位不一样的地方

1. 偏移计算元素不一样，相对定位偏移计算的容器是父元素，而黏性定位偏移计算的元素是层级最近的可滚动元素 （overflow属性值不是visible的元素），如果一个可滚动元素都没有，则相对浏览器进行位置偏移
2. 偏移定位计算规则不一样，黏性定位的计算规则比较复杂，涉及多个黏性定位专有的概念
3. 重叠表现不一样。相对定位元素彼此独立，重叠的时候表现为堆叠；但黏性定位元素在特定结构下，元素重叠的时候并不是表现为堆叠，而是会有A黏性定位元素推开B黏性定位元素的视觉表现

可滚动对黏性定位的影响

通常 Web 页面都是窗体滚动的，而黏性定位偏移计算元素是层级最近的那个滚动元素，因此，如果黏性定位元素的某个祖先元素的 overflow 属性值不是 visible ，那么窗体滚动时候不会有定位效果

• 如

<div>
    <nav></nav>
</div>
div{overflow:hidden;}
nav{position:sticky;top:0;}