定位position: static（預設）、fixed（固定定位）、absolute（絕對定位）、relative（相對定位）、sticky（粘性定位）
fixed
特點：不佔空間、不隨滾動條移動
相對於瀏覽器視窗進行定位，不佔空間；
如果不設定定位座標，則就在原來的位置；
如果結合定位座標，就是相對於目標位置的距離；
層級要比普通標籤高；
設定固定定位後，就一定是塊元素
relative
特點：佔空間、不脫離文件流的布局
如果不設定定位座標，則就在原來的位置；
如果結合定位座標，則是相對自身的距離；
層級要比普通標籤高
absolute
特點： 不佔空間、脫離文件流的布局
層級比普通標籤高；
（誰設定位就跟著誰）絕對定位如果有定位座標，則以祖先元素（需設定position為relative/absolute/fixed）作為座標的參考；
如果祖先沒有設定定位（relative/absolute/fixed），則一直往上找，直到找到body，就以body來進行定位，即相對於整個視窗來定位；
定位的起始位置為最近的父元素（position為relative/absolute，不能為static）
總之：當某個absolute定位元素的父元素具有position: relative/absolute/fixed時，定位元素都會依據父元素定位，而父元素沒有position屬性或者設定了預設屬性（static）,那麼會根據body來定位
sticky
是relative和fixed的混合，在螢幕範圍內時，沒有影響（relative），當要移除螢幕範圍時，會變成fixed
特點：該元素並不脫離文件流，仍然保留元素原本在文件流中的位置，即在螢幕範圍（viewport）時該元素的位置並不受到定位影響（設定是top、left等屬性無效）；
當該元素的位置將要移出偏移範圍時，定位又會變成fixed，根據設定的left、top等屬性成固定位置的效果（父元素的overflow屬性需是預設值visible屬性）；
sticky 是容器相關的，也就說 sticky 的特性只會在他所處的容器裡生效；
demo:
補充知識點
z-index屬性 僅能在定位元素上生效
技巧： css實現字型文字span總在其它元素上面？
實現方案：1）將父元素設定為position:relative
2）再將文字span設定為position:absolute
3）最後將span的z-index屬性設定為乙個較大的值 如z-index:999
html定位的幾種方式 CSS中常用的幾種定位方式
第一類float定位 即浮動定位 這種定位方式很簡單，只需規定乙個浮動的方向 如 float left 就表示這個元素向左邊擺放 它的定位是相對于父元素容器 如果該元素設定了浮動，後面緊鄰的則會受到浮動的影響，因此需要後面的元素若要不受影響，則要在後面清除浮動 可用clear both 等方法 在兩...
CSS中常見屬性和值 盒子和定位
一 css中常見屬性和值 1 字型屬性 1 字型家族 font family 宋體 楷體 2 字型風格 font style normal 普通 italic 斜體 3 字型大小 font size 4 字型加粗 font weight bold 2 控制文字屬性 1 文字字母間隔 letter s...
CSS 定位方式
1，什麼是定位 表示元素在網頁中的位置 2，css中，定位的分類 1，普通流定位 預設定位方式 2，浮動定位 重難點，用的最多 3，相對定位 4，絕對定位 5，固定定位 3，普通流定位 普通流定位，又稱為 文件流定位 是預設定位方式。典型的 流式布局 特點 1，每個元素在頁面中都有自己的位置，並佔據...