最近學習css相關知識，定位是其中的乙個難點。不了解其中細節，有時候在使用的時候會弄得一團糟。本篇文章整理下關於定位屬性的具體理解與應用。在介紹postion之前，有必要先了解下文件流。
簡單說就是元素按照其在 html 中的位置順序決定排布的過程。html的布局機制就是用文件流模型的，即塊元素（block）獨佔一行，內聯元素（inline），不獨佔一行。
一般使用margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。margin用於布局分開元素使元素與元素互不相干；padding用於元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段「距離」。
只要不是float和絕對定位方式布局的，都在文件流裡面。
表現如下：
"border:1px solid black">div1
"border:1px solid red">div2
這是一張
不管是哪種定位，都必須有乙個參照物。找對了參照物，就成功了一半。
relative生成相對定位的元素，相對於其正常位置進行定位。
相對定位完成的過程如下：
"box1">
"box2">
其中box2中的注釋**未生效前，是按照文件流進行排序呈現。
但是，當注釋**取消注釋生效後，就會相對文件流中應當呈現的位置進行移動。
所以，相對定位的參照物是它本身。
絕對定位與相對定位的一大不同之處就是，當我們把乙個元素設定成絕對定位，那麼這個元素將會脫離文件流，其他元素就會認為這個元素不存在於文件流中而填充它原來的位置。絕對定位元素根據它的參照物移動自己的位置，而參照物則需要根據它祖先元素的定位設定來確定。
所謂根據它祖先元素的定位設定來確定簡單理解為：相對於該元素最近的已定位的祖先元素，如果沒有乙個祖先元素設定定位，那麼參照物是body層。
以上面的圖形來展示絕對定位的特性。可以看出最裡層是兩個盒子，外面巢狀了兩層祖先元素。
1.祖先元素沒定位
在祖先元素沒定位的情況下，使用absolute。
在這種情況下，參考物就是body。
2.祖先元素有定位
祖先元素只要設定了值不為position:static之外的值，都視為有定位，並且最近的祖先元素會被設定為絕對定位元素的參照物。
在這種情況下，參考物就是最近的祖先元素。
除了上述兩種情況外，在使用者沒給absolute元素設定left/right、top/bottom的情況下，所對應的參考物會有變化。
3.未設定left/right、top/bottom
在沒設定left/right、top/bottom的情況下，absolute元素的位置就是該元素在文件流裡的位置
上圖可以看出兩個盒子重疊了，這是因為：absolute元素由於沒有設定left/right、top/bottom就按照其應該在文件流**現的位置進行定位，而absolute元素脫離文件流，紅色的盒子元素並不知道absolute元素的存在，就繼續放置在該位置，並且absolute元素會覆蓋正常文件流中的元素。
主要介紹了相對定位和絕對定位，其他定位方式比較簡單，試一試就知道了。另外，相對定位和絕對定位的應用也比較靈活，適用於多種場景。
更多專業前端知識，請上
【猿2048】www.mk2048.com
CSS定位屬性詳解
最近學習css相關知識，定位是其中的乙個難點。不了解其中細節，有時候在使用的時候會弄得一團糟。本篇文章整理下關於定位屬性的具體理解與應用。在介紹postion之前，有必要先了解下文件流。簡單說就是元素按照其在 html 中的位置順序決定排布的過程。html的布局機制就是用文件流模型的，即塊元素 bl...
CSS屬性之定位屬性詳解
定位是網頁的一種布局方式。文件流定位是指 文件流定位，物件遵循常規流，此時四個偏移屬性 top right bottom left 不會被應用。box1 box2 box3 頁面中的塊級元素從上到下乙個接乙個排列。每個塊級元素均以新的一行開始排列。效果如下 文件流是常見的一種定位方式。無論什麼元素新...
CSS定位屬性postiion詳解
首先來了解css的定位機制 css有三種基本的定位機制 普通流，浮動和絕對定位。除非專門制定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置 由元素在html中的位置決定。塊級框從上到下乙個接乙個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。行內框在一行中水平布置，可以使用水平內邊...