相對定位

CSS position屬性用於指定一個元素在文件中的定位方式。

top ， right ， bottom  和  left  屬性則決定了該元素的最終位置。

如下：未定位前的位置在定位後的位置左面50px。

.box1{
    position:relative;/*relative = 相對的意思*/
    left:50px;
}

特性

1. 不使元素脫離文件流 文件流：正常元素的流體佈局，從上至下 這裡有兩種說法，一種佔文件流自身的位置還在 一種不佔文件流確實層級比較高 可以理解成佔據自己的位置 同時提高了層級
2. 不影響元素本身特性，行內還是行內，塊級還是塊級
3. 層級未設定時，後來居上，後面設定的定位層級在上面。

絕對定位

相對於已經定位的父元素進行定位

特性

1. 完全脫離文件流
2. 行內元素支援寬高
3. 塊級元素內容撐開寬高，不會超過定位父級邊界的臨界點
4. 沒有祖先元素則相對於body
5. 一般配合相對定位使用
6. 絕對定位的元素的位置相對於最近的已定位祖先元素
7. margin:auto;失效

如何使一個盒子在頁面中百分之百居中呢？

第一種方法，先讓盒子50%移動，但不是居中，然後用margin再進行微調,-自己寬高的一半

第二種方法，margin當做和事老，距離四個邊界一樣的高度，但不建議用此騷操作。

/*第一種方法*/
position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;
/*第二種方法*/
margin:auto;position:absolute;top:0;left:0;right:0;bottom:0;

固定定位 fixed

position:fixed;

相對瀏覽器視窗定位

z-­index

層級只有定位元素才有

1. z-­index 可以調換兩個層的上下位置關係
2. 值可以為正，也可以為負，值越大，越在上面 預設值=0
3. 只能同級元素對比 你在大樓裡面，你自己不能和大樓比誰高！
4. z­-index:只對定位的元素有效，其它元素均無效