1. 基本屬性
| 值 | 屬性 |
|---|---|
| inherit | 規(guī)定應(yīng)該從父元素繼承 position 屬性的值 |
| static | 默認(rèn)值,沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明） |
| relative | 生成相對定位的元素腥沽，相對于元素本身正常位置進(jìn)行定位,因此诞吱，left:20px 會向元素的 left 位置添加20px |
| absolute | 生成絕對定位的元素，相對于static定位以外的第一個祖先元素（offset parent）進(jìn)行定位,元素的位置通過 left, top, right 以及bottom屬性進(jìn)行規(guī)定 |
| fixed | 生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。元素的位置通過 left, top, right 及 bottom 屬性進(jìn)行規(guī)定 |
| sticky | CSS3新屬性绿语，表現(xiàn)類似position:relative和position:fixed的合體，在目標(biāo)區(qū)域在屏幕中可見時平痰，它的行為就像position:relative; 而當(dāng)頁面滾動超出目標(biāo)區(qū)域時汞舱，它的表現(xiàn)就像position:fixed伍纫，它會固定在目標(biāo)位置 |
注意:sticky兼容性特別不好,不推薦使用.效果可以用javascript來實現(xiàn).
2.普通流與相對定位
CSS有三種基本的定位機(jī)制：普通流宗雇，相對定位和絕對定位
- 普通流是默認(rèn)定位方式，在普通流中元素框的位置由元素在html中的位置決定莹规，元素position屬性為static或繼承來的static時就會按照普通流定位赔蒲，這也是我們最常見的方式
- 相對定位比較簡單，對應(yīng)position屬性的relative值，如果對一個元素進(jìn)行相對定位舞虱，它將出現(xiàn)在他所在的位置上欢际，然后可以通過設(shè)置垂直或水平位置，讓這個元素相對于它自己移動矾兜，在使用相對定位時损趋，無論元素是否移動，元素在文檔流中占據(jù)原來空間椅寺，只是表現(xiàn)出來的位置會改變
普通流
<div style="border: solid 1px #0e0; width:200px;">
<div style="height: 100px; width: 100px; background-color: Red;"> </div>
<div style="height: 100px; width: 100px; background-color: Green;"> </div>
<div style="height: 100px; width: 100px; background-color: Red;"> </div>
</div>
**相對定位**
>```
<div style="border: solid 1px #0e0; width:200px;">
<div style="height: 100px; width: 100px; background-color: Red;"> </div>
<div style="height: 100px; width: 100px; background-color: Green; position:relative; top:20px; left:20px;"></div>
<div style="height: 100px; width: 100px; background-color: Red;"></div>
</div>
3.絕對定位與固定定位
相對定位可以看作特殊的普通流定位浑槽，元素位置是相對于它在普通流中位置發(fā)生變化，而絕對定位使元素的位置與文檔流無關(guān)返帕，也不占據(jù)文檔流空間桐玻，普通流中的元素布局就像絕對定位元素不存在一樣
絕對定位的元素的位置是相對于距離最近的非static祖先元素
位置決定的。如果元素沒有已定位的祖先元素荆萤，那么他的位置就相對于初始包含塊html來定位demo镊靴。因為絕對定位與文檔流無關(guān)，所以絕對定位的元素可以覆蓋頁面上的其他元素链韭，可以通過z-index
屬性控制疊放順序偏竟，z-index越高，元素位置越靠上敞峭。
absolute絕對定位
<div style="border: solid 1px #0e0; width:200px; position:relative;">
<div style="height: 100px; width: 100px; background-color: Red;"></div>
<div style="height: 100px; width: 100px; background-color: Green; position:absolute; top:20px; left:20px;"></div>
<div style="height: 100px; width: 100px; background-color: Yellow;"></div>
</div>
**fixed固定定位**
固定定位是絕對定位的一種苫耸，固定定位的元素也不包含在普通文檔流中，差異是固定元素的包含塊兒是視口（viewport）
>```
<div style="border: solid 1px #0e0; width:200px;">
<div style="height: 100px; width: 100px; background-color: Red;"></div>
<div style="height: 100px; width: 100px; background-color: Green; position:fixed; bottom:20px; left:20px;"></div>
<div style="height: 100px; width: 100px; background-color: Yellow;"></div>
</div>
絕對定位寬度
絕對定位寬度是收縮的儡陨，如果想撐滿父容器褪子，可以設(shè)置 width: 100%
<div style="position: absolute; background: red">hello 饑人谷</div>
絕對定位和 BFC
絕對定位能形成 BFC 可用來清除浮動 可用來阻止外邊距合并
