一：理解

如果懂Photoshop的同事，那么層模型就像它的圖層那樣，上下圖層互不影響，可以重疊組合出你想要的視覺。

或者可以理解為樓層，同一棟大廈的不同樓層，再二維角度說，大家的經緯度（頁面元素的位置）可以任意調整。

二：使用
在前端編碼中，層模型有三種形式出現：
1-絕對定位(position: absolute)
2-相對定位(position: relative)
3-固定定位(position: fixed)

絕對定位

脫離文檔流的元素位置且不保留原位置（即自動分層了，類似photoshop的添加圖層）。

如果沒有參照物，它將按照瀏覽器的邊界配合（right-top-bottom-left）css屬性值調整你想要的元素定位。

參照物：絕對定位的盒子是相對于離它最近的一個已定位的盒子進行定位的（默認是body）；

相對定位

脫離文檔流的元素位置但是保留原元素占有的位置

固定定位

可以理解為相對于瀏覽器屏占位置固定在你要的地方，一般用于廣告或者居中的登陸窗。

三：總結

絕對定位和相對定位都會對文檔流造成相關的影響，為了影響最小，一般絕對定位配合相對定位使用。

即絕對定位absolute的元素父級節點要使用相對定位relative

?

總結

以上是生活随笔為你收集整理的CSS之层模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。