定位型別

position

靜態定位

position:static; 預設值

靜態定位不能使盒子位置變化 不適合佈局
作用：解決低版本瀏覽器相容問題

相對定位

position:relative;

1.能不能使盒子發生位置變化 （可以）
2.參考物件：自身初始位置
3.脫離不脫離標準流 不脫離標準（保留原來位置 ）
4.是否適合佈局：不適合佈局（壓蓋，特殊位置）因為會留空白
作用：1. 微調元素的位置（相當於外邊距）
2.輔助絕對定位(子絕父相)
#### 絕對定位

position:absolute;

1. 能不能使盒子發生位置變化 （可以）
2. 參考物件：body和瀏覽器可視視窗（看盒子隨著滾動條動不動 不動—》瀏覽器 動—》body）
   最終確定： 以body做參考(左上以body參考 右下以瀏覽器視窗做參考)
3. 是否適合佈局：非常適合佈局 （壓蓋）不僅脫離標準流 還脫離文字流

固定定位

position:fixed;

1. 能不能使盒子發生位置變化 （可以）
2. 參考物件： 瀏覽器可視視窗—>不隨滾動條滾動而滾動
3. 脫離不脫離標準流 脫離標準流
4. 是否適合佈局：適合
5. 有限制的佈局：不隨滾動條滾動而滾動的佈局

定位實現盒子的水平和垂直居中

方法1：

div {
    position:absolute/fixed;
    //向右走父盒子寬度的一半
    left:50%;
     //向下走父盒子高度的一半
    top:50%;
    //向上走自身高度的一半
    margin-top:-h/2;
     //向左走自身寬度的一半
    margin-left:-w/2;
    //要求這個盒子必須有明確可以計算的寬度 ，高度
    width:wpx;
    height:hpx;
}

方法2：

            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin:auto;
            width: 50px;
            height: 50px;
            background-color: yellow;

兩個方法都是有前提的：要求這個盒子必須有明確可以計算的寬度 ，高度!!!

定位座標值

left:定位元素左側邊界距離參考物件左側邊界的值
top:定位元素上側邊界距離參考物件上側邊界的值
right:定位元素右側邊界距離參考物件右側邊界的值
bottom:定位元素下側邊界距離參考物件下側邊界的值

(left ,top )  or (right ,top) or 
(left ,bottom) or (right,bottom
一個座標即可確定盒子位置

定位使用： 1.明確定位型別 2.定位座標值

層級屬性（相對，絕對，固定）

z-index: 設定定位盒子的顯示順序 值越大 越向上展示（越在螢幕前的顯示）預設值是0 

標準流盒子的層級屬性 z-index:0;
          /* 被標準流盒子壓蓋的時候 */
            z-index: -1; 

總結：

定位型別	是否發生位置變化	參考物件	適合佈局	是否脫離標準
static	否	無	不適合	無
relative	是	自身初始位置	不適合	no(因為保留原來位置)
absolute	是	初始body,子絕父相（父級元素）	非常適合	是（不佔據介面位置）
fixed	是	瀏覽器視窗	適合（不滾動的盒子）	脫離

脫標的定位屬性對於元素型別的影響

行內+定位（absolute+fixed）---->不區分型別 私有密閉的區域 （BFC盒子） 什麼屬性都可以設定

行內塊+定位（absolute+fixed）---->不區分型別 私有密閉的區域 （BFC盒子） 什麼屬性都可以設定

塊型別+定位（absolute+fixed）---->不區分型別 私有密閉的區域 （BFC盒子） 什麼屬性都可以設定

顯示和隱藏

第一種：

display:block顯示/none隱藏

不保留原來位置（在HTML結構樹直接移除掉） 不頻繁切換顯示和隱藏

第二種：

visibility:visible顯示/hidden隱藏

保留原來位置（在HTML結構樹上還是有的 透明度為0）頻繁切換顯示和隱藏

盒子溢位處理

overflow:hidden/visible/auto/scroll;
            /* overflow: visible;預設值 */
            /* 隱藏掉 */
            /* overflow: hidden; */
            /* 溢位不溢位 都顯示滾動條 但是溢位顯示滑塊+滾動條 */
            /* overflow: scroll; */
            /* 溢位 顯示滾動條 不溢位 不顯示滾動條（比較智慧） */
            /* overflow: auto; */
            overflow-y: auto;
            overflow-x: hidden;