title: css的position值
date: 2018-04-27 23:00:00
tags: position
categories: 前端
CSS position屬性用于指定一個(gè)元素在文檔中的定位方式翰蠢。top榴捡，right，bottom 和 left 屬性則決定了該元素的最終位置。
文檔流
- 正常的文檔流會(huì)根據(jù)元素的類(lèi)型來(lái)流動(dòng)
- 內(nèi)聯(lián)元素會(huì)從左至右流動(dòng)朋截，顯示不下去之后會(huì)換行繼續(xù)從左向右
- 塊級(jí)元素從上往下流動(dòng)
- 脫離文檔流的方法有浮動(dòng)，絕對(duì)定位，固定定位
position5個(gè)取值
static 相對(duì)定位
該關(guān)鍵字指定元素使用正常的布局行為，即元素在文檔常規(guī)流中當(dāng)前的布局位置胶台。此時(shí) top, right, bottom, left 和 z-index 屬性無(wú)效。
relative
該關(guān)鍵字下杂抽，元素先放置在未添加定位時(shí)的位置诈唬，再在不改變頁(yè)面布局的前提下調(diào)整元素位置（因此會(huì)在此元素未添加定位時(shí)所在位置留下空白）。position:relative 對(duì) table-*-group, table-row, table-column, table-cell, table-caption 元素?zé)o效缩麸。
相對(duì)定位的元素是在文檔中的正常位置偏移給定的值铸磅，但是不影響其他元素的偏移。相對(duì)定位的元素并未脫離文檔流
absolute 絕對(duì)定位
不為元素預(yù)留空間匙睹，通過(guò)指定元素相對(duì)于最近的非 static 定位祖先元素的偏移，來(lái)確定元素位置济竹。絕對(duì)定位的元素可以設(shè)置外邊距（margins）痕檬，且不會(huì)與其他邊距合并。
絕對(duì)定位元素相對(duì)于最近的非 static 祖先元素定位送浊。當(dāng)這樣的祖先元素不存在時(shí)梦谜，則相對(duì)于ICB（inital container block, 初始包含塊）,視窗。絕對(duì)定位的元素脫離了文檔流
fixed 固定定位
不為元素預(yù)留空間袭景，而是通過(guò)指定元素相對(duì)于屏幕視口（viewport）的位置來(lái)指定元素位置唁桩。元素的位置在屏幕滾動(dòng)時(shí)不會(huì)改變。打印時(shí)耸棒，元素會(huì)出現(xiàn)在的每頁(yè)的固定位置荒澡。fixed 屬性會(huì)創(chuàng)建新的層疊上下文。當(dāng)元素祖先的 transform 屬性非 none 時(shí)与殃，容器由視口改為該祖先单山。
固定定位會(huì)固定顯示在設(shè)置的位置碍现，脫離了文檔流
sticky 粘性定位
盒位置根據(jù)正常流計(jì)算(這稱(chēng)為正常流動(dòng)中的位置)，然后相對(duì)于該元素在流中的 flow root（BFC）和 containing block（最近的塊級(jí)祖先元素）定位米奸。在所有情況下（即便被定位元素為 table 時(shí)）昼接，該元素定位均不對(duì)后續(xù)元素造成影響。當(dāng)元素 B 被粘性定位時(shí)悴晰，后續(xù)元素的位置仍按照 B 未定位時(shí)的位置來(lái)確定慢睡。position: sticky 對(duì) table 元素的效果與 position: relative 相同。
粘性定位是相對(duì)定位和固定定位的混合铡溪。元素在跨越特定閾值前為相對(duì)定位漂辐，之后為固定定位。例如：
