CSS布局的核心是 position 屬性，對元素盒子應用這個屬性，可以相對于它在常規文檔流中的位置重新定位。

語法

position: value（默認值：static）
value常見值：
static | relative | absolute | sticky | fixed | inherit

static：默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

inherit: 規定應該從父元素繼承 position 屬性的值。

relative: 生成相對定位的元素，相對于其正常位置進行定位。

absolute: 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

fixed: 生成絕對定位的元素，相對于瀏覽器窗口進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

sticky: 粘性定位可以被認為是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位，之后為固定定位。

靜態定位（static）

在靜態定位的情況下，每個元素在處在常規文檔流中。它們都是塊級元素，所以就會在頁面中自上而下逐一排列顯示，如下：

相對定位(relative)

相對定位，相對的而是它原來在文檔流中的位置（或者默認位置），可以使用top/right/bottom/left屬性改變它的位置。
該關鍵字下，元素先放置在未添加定位時的位置，再在不改變頁面布局的前提下調整元素位置（因此會在此元素未添加定位時所在位置留下空白）。position:relative 對 table-*-group, table-row, table-column, table-cell, table-caption 元素無效。

tips: 可以給top/left屬性設定負值，把元素向上/向左移動。

示例：將第三個div相對原來的位置向上移動18px，向右移動50px。

絕對定位(absolute)

元素會被移出正常文檔流，并不為元素預留空間，通過指定元素相對于最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對定位的元素可以設置外邊距（margins），且不會與其他邊距合并。
示例：將第四個div設置為絕對定位，向右移動30px

盒子四的相對元素是body, 盒子三的相對元素是外層div

固定定位(fixed)

元素會被移出正常文檔流，并不為元素預留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出現在的每頁的固定位置。fixed 屬性會創建新的層疊上下文。當元素祖先的 transform, perspective 或 filter 屬性非 none 時，容器由視口改為該祖先。
固定定位與絕對定位類似,但不同之處在于，固定定位元素的定位上下文是視口（瀏覽器窗口或手持設備的屏
幕），因此它不會隨頁面滾動而移動。如下實例：

粘性定位（sticky）

粘性定位可以被認為是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位，之后為固定定位。
實例：

定位上下文

把元素的 position 屬性設定為 relative 、 absolute 或fixed 后，繼而可以使用 top、right、bottom 和 left 屬性，相對于另一個元素移動該元素的位置。這里的“另一個元素”，就是該元素的定位上下文。
如下實例，雖然inner上定義了top： 100px,可是并沒有起作用，原因在于內外部div默認都是靜態定位，它們之間不存在誰是誰的定位上下文這個問題。換句話說，在常規文檔流中，由于外部div沒有內容，內部div就會跟它共享相同的起點。只有將position屬性設定為relative、absolute或fixed，這個元素的top、right、bottom 和 left 屬性才會起作用。

絕對定位元素的默認上下文是body。然而絕對定位元素的任何祖先元素都可以成為它的定位上下文，只要把相應的祖先元素的position設定為relative即可。

參考網站：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
https://www.w3school.com.cn/cssref/pr_class_position.asp
https://my.oschina.net/u/866703/blog/221809

如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “點贊” “評論” “收藏” 一鍵三連哦！
聽說 點贊 的人運氣不會太差，每一天都會元氣滿滿哦 嘿嘿!!! ? ? ?
大家的支持就是我堅持下去的動力。點贊后不要忘了 關注 我哦！

個人微信：iotzzh
公眾號：前端微說
個人網站：www.iotzzh.com