文檔流

文檔流，是指盒子按照html標(biāo)簽編寫的順序依次從上到下，從左到右排列，塊元素占一行，行內(nèi)元素在一行之內(nèi)從左到右排列，先寫的先排列，后寫的排在后面，每個(gè)盒子都占據(jù)自己的位置。

?

定位：

1、relative 生成相對(duì)定位元素，元素所占據(jù)的文檔流的位置保留，元素本身相對(duì)自身原位置進(jìn)行偏移。

2、absolute 生成絕對(duì)定位元素，元素脫離文檔流，不占據(jù)文檔流的位置，可以理解為漂浮在文檔流的上方，相對(duì)于上一個(gè)設(shè)置了定位的父級(jí)元素來進(jìn)行定位，如果找不到，則相對(duì)于body元素進(jìn)行定位。

3、fixed 生成固定定位元素，元素脫離文檔流，不占據(jù)文檔流的位置，可以理解為漂浮在文檔流的上方，相對(duì)于瀏覽器窗口進(jìn)行定位。

4、static 默認(rèn)值，沒有定位，元素出現(xiàn)在正常的文檔流中，相當(dāng)于取消定位屬性或者不設(shè)置定位屬性。

?

定位元素的偏移

定位的元素還需要用left、right、top或者bottom來設(shè)置相對(duì)于參照元素的偏移值。

?

定位元素層級(jí)

定位元素是浮動(dòng)的正常的文檔流之上的，可以用z-index屬性來設(shè)置元素的層級(jí)

偽代碼如下:

???......
??? position:absolute;? /* 設(shè)置了絕對(duì)定位 */
??? left:200px;??????????? /* 相對(duì)于參照元素左邊向右偏移200px */
??? top:100px;????????? /* 相對(duì)于參照元素頂部向下偏移100px */
??? z-index:10????????? /* 將元素層級(jí)設(shè)置為10 */

?

定位元素特性

絕對(duì)定位和固定定位的塊元素和行內(nèi)元素會(huì)自動(dòng)轉(zhuǎn)化為行內(nèi)塊元素

相對(duì)定位	絕對(duì)定位	固定定位	默認(rèn)沒有定位
relative	absolute	fixed	static
參照自己	參照父元素,父元素需要設(shè)置relative	參照瀏覽器	?
移動(dòng)之后原先的位置還在	脫離文檔流,不占位置	脫離文檔流,不占位置	?
?	?	?	?

總結(jié)

以上是生活随笔為你收集整理的定位position（前面布局无法实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。