關於定位（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>