定位

定位方向：top left right bottom就這四個位置

一、靜態定位

 position：static;

靜態定位就是文件流，沒有別的意思，不需要寫

二、絕對定位 （脫標）

position：absolute;

（注意）參考點問題：

1）如果用top描述，定位的參考點是整個頁面的最左上角，而不是瀏覽器的左上角
2） 如果用bottom描述，參考點是“ 瀏覽器首屏視窗尺寸 ”，注意：是首屏， 對應當前頁面的左下角（不滾動到下面去）

1. 若無相對定位作參考，則以瀏覽器頁面為參考
2. 當盒子發生巢狀關係時，如果父集元素沒有設定定位，子盒子設定了絕對定位並賦值，子盒子的位置從瀏覽器左上角出發。
3. （子絕父絕）當盒子發生巢狀關係時，如果父集元素設定了絕對定位，子盒子設定了絕對定位並賦值，子盒子的位置從父集元素左上角出發。

三、相對定位

position：relative;

就是微調元素的位置，讓元素想對自己原來的位置，進行位置調整

1.不脫標，老家留坑，形影分離

本質上元素位置還在原來的地方，只不過飄到別的地方去了（相當於影子）

2.使用相對定位，位置從自身出發

3.還佔據原來的位置。沒有脫標，可用於做微調

四、固定定位

 position: fixed;

是相對於瀏覽器視窗定位。頁面如何滾動，這個盒子顯示的位置保持不變。（IE6不相容）

1.脫標

2.固定定位後，以瀏覽器為參考點

層疊性：z-index屬性

（number型別）正整數，預設的z-index值是0

取值範圍如下：

1）從夫現象

父節點的z-index屬性值，將會直接影響子節點的層疊性
即： 父節點的z-index值很小，無論子節點的z-index值多大，其層級仍然小。

1. 例如：
   A,B節點都設定position為relative，且A的z-index為1，B的z-index為0，A的層級比B大
   因此：A的子節點必定會覆蓋在B的子節點上，無論B的子節點的z-index值多大。

<div id="A" style
 
="position:relative;z-index:1;">
    <div id="a-1" >A-1</div>
</div>
<div id="B" style="position:relative;z-index:0;">
    <div id="b-1">B-1</div>
</div>

2） z-index值表示誰壓著誰。數值大的壓蓋住數值小的

3）只有定位了的元素，才能有z-index值（相對定位，絕對定位，固定定位）浮動的盒子不能用。

4）如果都沒有z-index值，或值都相同，那麼誰在HTML後面，誰就在上面，壓住別人。

<div id="a">A</div>
<div id="b">B</div>
<!--A，B節點都設定了定位，且沒有設定z-index值，那麼B節點會將A節點遮住-->

注意：
定位了的元素，永遠能夠壓住沒有定位的元素

層疊順序

層級由低到高：
1.標準流盒子 < 浮動盒子 < 定位盒子
2.background/border < 負z-index < block塊狀水平盒子 < float浮動盒子 < inline/inline-block水平盒子 < z-index：0 < 正index