CSS 定位,絕對定位(absolute),相對定位(relative)

定位方向: left  | right  | top  | bottom

一、靜态定位  position:static;  預設值，就是文檔流。

二、絕對定位

Position:absolute;

特點：

1.元素使用絕對定位之後不占據原來的位置（脫标）

2.元素使用絕對定位，位置是從最近的有relative相對位置的父級(祖先)元素(直到body标簽)出發。

3.嵌套的盒子，父盒子(祖先盒子)沒有使用定位，子盒子絕對定位，子盒子位置是從body标簽出發。

4.嵌套的盒子，父盒子使用定位，子盒子絕對定位，子盒子位置是從父元素位置出發。

5.給行内元素使用絕對定位之後，轉換為行内塊。（不推薦使用，推薦使用display:inline-block;）

三、相對定位

Position: relative;

特點：

1.使用相對定位，位置從自身出發。

2.還占據原來的位置。

3.子絕父相（父元素相對定位，子元素絕對定位）

4.行内元素使用相對定位不能轉行内塊

四、固定定位

Position:fixed;

特點：

1.固定定位之後，不占據原來的位置（脫标）

2.元素使用固定定位之後，位置從浏覽器出發。

3.元素使用固定定位之後，會轉化為行内塊(脫标和浮動會轉為行内塊)（不推薦，推薦使用display:inline-block;）