在利用div+css進行頁面布局時，position定位的理解如下：
1.（當前元素的）position：relative，不脫離文件流的布局，相對於自身位置的偏移，原自身位置出現空白時後面的元素不會進行填充，也即當前元素與後面元素的相對位置（或稱相對順序）不會發生改變，我通常理解為：無論怎樣，當前元素與後續元素的前後順序不會發生改變。
2.（當前元素的）position：absolute，脫離文件流的布局，原自身位置出現空白時由後面的元素進行填充，定位的起始位置是父元素（position不是static）或者body，也即當前元素相對于父元素或者body的位置是固定不變的，但是後續的元素可能會移動到當前元素的前面，我通常理解為：當前元素與後續元素的前後順序可能會發生改變。
3.（當前元素的）position：fixed，與absolute類似，但是不隨滾動條的移動而改變位置（比如有些網頁右下角放置的廣告，當下拉滾動條時，廣告的位置是不變的），當瀏覽器縮小到此元素不可見時，頁面上不會出現滾動條。
4.（當前元素的）position：static，預設值。
參考文章（內有圖示詳解）：css position定位屬性
頁面布局之flex布局
flex布局 flex布局也叫作彈性盒子布局，可以簡便 完整 響應式的實現各種頁面布局，同時也支援所有的瀏覽器。父級元素設定css樣式為 display flex。內容的位置用justify content來控制，常用的屬性有 space between space around center le...
Grid布局 頁面布局如此簡單
css網格布局用於將頁面分割成數個主要區域，或者用來定義元件內部元素間大小 位置和圖層之間的關係。像 一樣，網格布局讓我們能夠按行或列來對齊元素。但是，使用css網格可能還是比css 更容易布局。例如，網格容器的子元素可以自己定位，以便它們像css定位的元素一樣，真正的有重疊和層次。gird布局是一...
簡單理解彈性布局display flex
作為前端初學者來說，頁面布局是萬萬不能忽略的。接下來我簡單的談談彈性布局display flex 2009年，w3c提出了一種新的方案，這個方案就是 flex布局 彈性布局 它可以簡便 完整 響應式地實現各種頁面布局。採用flex布局的元素，稱為flex容器，容器裡的所有元素就被稱為專案。整個容器預...