css一共有四種定位方式

1.static（靜態定位）

預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。

2、relative（相對定位）

定位為relative的元素脫離正常的文件流，但其在文件流中的位置依然存在，只是視覺上相對原來的位置有移動。

通過top,bottom,left,right的設定相對於其正常（原先本身）位置進行定位。可通過z-index進行層次分級 。

他是預設參照父級的原始點為原始點（父級不是必須設定position屬性），無論父級存在不存在，無論有沒有TRBL，均是以父級的左上角進行定位，但是父級的Padding屬性會對其影響。

無父級則以文字流的順序在上一個元素的底部為原始點

3、absolute（絕對定位）

生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。可通過z-index進行層次分級。

定位為absolute的層脫離正常文件流，但與relative的區別是其在正常流中的位置不再存在。

1，如果沒有TRBL(top、right、bottom、left)，以父級的左上角，在沒有父級的時候，參照瀏覽器左上角。

2，如果設定TRBL，並且父級沒有設定position屬性（position:static;不算設定了屬性），那麼當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由TRBL決定。

3，如果設定TRBL，並且父級設定position屬性(無論是absolute還是relative)，則以父級的左上角為原點進行定位，位置由 TRBL決定。即使父級有Padding屬性，對其也不起作用。

4、fixed（固定定位）：

生成絕對定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。可通過z-index進行層次分級。

1、如果沒有TRBL(top、right、bottom、left)，預設參照父級的原始點為原始點（父級不是必須設定position屬性）。

2、如果設定TRBL，相對於瀏覽器視窗進行定位。

z-index屬性

z-index，又稱為物件的層疊順序，它用一個整數來定義堆疊的層次，整數值越大，則被層疊在越上面，當然這是指同級元素間的堆疊，如果兩個物件的此屬 性具有同樣的值，那麼將依據它們在HTML文件中流的順序層疊，寫在後面的將會覆蓋前面的。需要注意的是，父子關係是無法用z-index來設定上下關係 的，一定是子級在上父級在下。
使用static 定位或無position定位的元素z-index屬性是無效的。