定位在我們頁面中應用非常廣泛，可是使我們頁面更加簡潔快捷，今天我們就來談談定位屬性（position）
講到定位我們就要先了解定位機制：
定位的三種機制
*普通流、浮動流、定位流
1、普通：上下排列的布局（注：大部分情況）
2、浮動：左右排列的布局（注：大部分情況）
3、定位：層疊（疊加）排列的布局 （注：大部分情況）
在css中定位屬性position有以下幾種屬性值，我們分別來了解以下
1、position：static：預設值；沒有定位； （可以用於取消元素之前的定位設定）
2、position：relative（相對定位）：相對定位 （參照物：自己所在的位置）
特點： 如果沒有定位偏移量，對元素本身沒有任何影響
不使元素脫離文件流，空間是會被保留。
不影響其他元素布局
3、position：absolute(絕對定位):絕對定位 （參照物：包含塊—該元素的祖先級元素）
特點：使元素完全脫離文件流
使內聯元素支援寬高
使塊元素預設寬根據內容決定（讓塊具備內聯的特性）
注：left、top、right、bottom是相對於當前元素自身進行偏移的 ，不能獨自存在，必須配合定位元素一起使用 。
下面我們分別來看看他們的效果
初始效果
一、static
此時已經新增了距離左邊50px的偏移量
來看看效果
是沒有移動的。
二、relative（相對定位）
還是這個頁面，但此時我們給centent新增了relative（相對定位）
效果如下：
我們可以看到他相對原來位置向右移動了50px的，但是原來的位置依然在。
**三、absolute（絕對定位）
還是中間這塊
注：這裡在absolute後面文字打錯了應該是絕對定位
此時給上了絕對定位：
來看看效果：
這個我們可以看到他已經跑出去了，且原來位置已經被後來居上，這是因為絕對定位果有定位祖先元素相對於定位祖先元素發生偏移，沒有定位祖先元素相對於整個文件發生偏移。
這樣看是不是一目了然呢。
注：如果祖先元素中有多個元素具備定位模式，那麼是已離自己最近的祖先元素進行偏移。預設情況下是相對可視視窗進行定位的。
再來簡單概括一下相對定位和絕對的區別：
1、相對定位的參照物是自己本身所在的位置，絕對定位的參照物的是包含塊
2、相對定位是不會脫離文件流的，而且不會對頁面的布局產生影響；絕對定位是會脫離文件流的，原來的位置就不在占有的，後面的內容會把位置補上去。
這裡根據我們上訴的語句也可以看出來。
四、固定定位（fixed）：
（參照物：始終都是 相對於整個瀏覽器視窗進行固定定位的）
使元素完全脫離文件流
使內聯元素支援寬高 （讓內聯具備內聯塊特性）
使塊元素預設寬根據內容決定（讓塊具備內聯塊的特性）
相對於整個瀏覽器視窗進行偏移，不受瀏覽器滾動條的影響不會受到祖先元素的影響。
來看看效果
我們可以看到瀏覽器視窗是進行的移動下滑的。但我們的藍框始終在自己原來的位置一動不動。
最後乙個粘性定位（sticky）
這個很好理解， 在沒有到達指定位置的時候，是沒有定位效果的，到達了指定位置，就變成了固定模式。就成了和fixed差不多的乙個樣式 固定在乙個地方不動了 常見於頁面的搜尋框。
CSS 定位position屬性
div h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即 塊框 與之相反，span 和 strong 等元素稱為 行內元素 這是因為它們的內容顯示在行中，即 行內框 您可以使用 display 屬性改變生成的框的型別。將 display 屬性設定為 block，可以讓行內元素...
CSS 定位屬性position
一 position 屬性 規定元素的定位型別。即元素脫離文件流的布局，在頁面的任意位置顯示。有4種不同型別的定位 absolute 絕對定位 脫離文件流的布局，遺留下來的空間由後面的元素填充。定位的起始位置為最近的父元素 postion不為static 否則為body文件本身。relative 相...
CSS定位屬性Position詳解
css中最常用的布局類屬性，乙個是float css浮動屬性float詳解 另乙個就是css定位屬性position。所有元素的預設定位都是 position static，這意味著元素沒有被定位，而且在文件 現在它應該在的位置。一般來說，不用指定 position static，除非想要覆蓋之前設...