关于定位（position属性）

1、absolute

• 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。

• absolute绝对定位元素相对的元素是它最近的父元素进行定位，该父元素满足：position的值必须是：relative、absolute、fixed，若没有这样的父元素则相对于body进行定位。

• 元素的位置通过“left”，“top”，“right”以及“bottom”属性进行规定。

2、fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

当元素祖先的 transform 属性非 none 时，容器由视口改为其父元素。

3、relative

生成相对定位的元素，相对于其正常位置进行定位。不脱离文档流。

4、static

默认值。没有定位，元素出现在正常的流中（忽略top，bottom，left，right或者z-index声明）。

5、inherit

规定应该从父元素继承position属性的值。

6、sticky

css3新属性，可以说是position:relative和position:fixed的合体。主要用在对scroll事件的监听上。

1.在目标区域在屏幕中可见时，它的行为就像position:relative;

2.页面滚动时

• 当父元素是body时

  a.滚动距离小于屏幕高度或宽度，它会固定在目标位置

  b.滚动距离大于屏幕高度或宽度，它的表现就像position:relative和1一样

• 当父元素不是body

  a.在父元素高度内滚动时它会固定在目标位置，就像fixed

  b.在父元素滚动为不可视时它的表现就像position:relative和1一样

使用条件：
1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一，否则其行为与相对定位相同。并且top和bottom同时设置时，top生效的优先级高，left和right同时设置时，left的优先级高。
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效

例子：标题吸顶

<ul class="sticky-list">
    <li class="sticky-item">
        <div class="title">list1</div>
		// n个list
        <ul class="list">
			// n个item
        	<li class="item">1111</li>
        </ul>
    </li>
</ul>

<style>
    .title {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        background-color: #fff;
    }
    .item {
        display: block;
    }
</style>