1、position 屬性

position屬性指定一個元素（靜態(tài)的，相對的，絕對或固定）的定位方法，共有4個屬性值，分別是 static、fixed、relative、absolute、sticky。

1.1、static 屬性值（默認定位，占據(jù)空間）

static定位是 HTML 元素的默認值，即沒有定位，元素出現(xiàn)在正常的流中。你如果設置了 position 為 static 或者沒有設置 position 屬性，則該元素就是 static 定位，這種定位就不會受到top，bottom,、left、right的影響，僅僅只是正常出現(xiàn)在流中。

1.2、固定定位 fixed（不在文檔流內(nèi)）

使用 fixed 定位的元素的位置相對于瀏覽器窗口是固定的，即使窗口是滾動的它也不會滾動，定義了 fixed 定位的元素所設置的 top 或者left 等屬性是相對于瀏覽器的窗口的。fixed 定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間，它會和其他元素發(fā)生重疊。

下面綠色的元素使用的是 fixed 定位，top為0px、right為0px，固定在窗口的右上邊，剛好貼著窗口。不在文檔流內(nèi)，不會占據(jù)空間，其他元素能擠在它的下面。 

top為10px、right為10px，固定在窗口的右上邊，距離窗口10像素的距離 

1.3、絕對定位 absolute（不在文檔流內(nèi)）

絕對定位 absolute 的元素是相對于 static 定位以外的第一個父元素進行定位，如果元素沒有已定位的父元素，那么它的位置相對于整個窗口。且 absolute 定位的元素與文檔流無關(guān)，不占據(jù)空間，其他元素能擠在它的下面而發(fā)生重疊。

下面對最里面的元素使用了絕對定位，但是它的父元素使用的定位是 static，其他更上層的父元素都是默認定位，此時absolute定位的元素是相對于窗口進行定位的。

<div class="aaa">
    <div class="bbb" style="position: static; background-color: #70e3b5; height: 50px">
      <h2 class="ccc">這里是absolute定位元素</h2>
    </div>
</div>

.ccc{
  position: absolute;
  top: 0px;
  right: 0px;
  color: #2b4d4d;
}

跑到了整個窗口的最右上邊

給父元素 bbb 定義一個相對定位 relative，此時absolute 定義相對于定義了 relative 定位的父元素進行定位

 如果是給父元素 ccc 定義relative定位，而 bbb 是默認定位的話，可以看到，此時 absolute 定義的元素是相對于 ccc 父元素進行定位的。所以 absolute 的元素是相對于 static 定位以外的第一個父元素進行定位

1.4、相對定位 relative（在文檔流內(nèi)，占據(jù)空間）

生成相對定位的元素，相對于其本身的正常位置進行定位。使用了相對定位的元素的原本所占的空間不會被擠壓。當然，如果你設置的偏移太大，該元素有可能會跑到其他元素的上面而發(fā)生重疊

 1.5、粘性定位 sticky（當在top值大于與窗口距離時切換為固定定位）

粘性定位，有一些非常奇怪的行為表現(xiàn)。

如果沒有其他標簽包裹該標簽，即放在body標簽內(nèi)，假如設置了 top 屬性，當 top 的值大于該標簽到瀏覽器窗口的上邊距離時才有效果，或者瀏覽器滾動使得該標簽與瀏覽器窗口的距離小于 top 值時才有效果，此時相當于是固定定位 fixed。

如果有其他標簽包裹該標簽，比如你把一個粘性定位的元素放在一個div標簽里，此時也是當 top 的值大于該標簽到瀏覽器窗口的上邊距離時才有效果，此時他是固定定位，但是他出現(xiàn)的范圍只限于在他的父元素之內(nèi)。

需注意：

（1）元素光設置該屬性并不會讓元素起任何變化，必須至少指定 top, right, bottom 或 left 四個屬性值其中之一才生效。

（2）設定為 position:sticky 元素的任意父節(jié)點的 overflow 屬性都必須是 visible（默認值），否則 position:sticky 不會生效。

詳細參考：http://www.rzrgm.cn/moqiutao/p/7341671.html

2、z-index屬性（設置元素的堆疊順序）

z-index 只能在 position 屬性值為 relative、absolute、fixed 的元素上有效。當元素使用了一些定位而發(fā)生重疊時，可以使用 z-index 屬性指定哪個元素在上面，哪個在下面。

元素可以有正數(shù)或負數(shù)的堆疊順序，具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面，沒有指定z - index，最后定位在HTML代碼中的元素將被顯示在最前面。

詳細可參考：http://www.rzrgm.cn/zhuzhenwei918/p/6112034.html