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即可。
參考網站：