元素的定位屬性
1.邊偏移
top | bottom | left | right |
2.定位模式
靜態定位 | 相對定位 | 絕對定位 | 自動定位
position： static | relative | absolute | fixed
static:
靜態定位(默認的)
網頁中所有元素都默認是靜態定位，也就是標準流的特性
無法通過邊偏移屬性來改變元素的位置
relative :
相對定位（自戀型）
1.通過邊偏移移動位置，但原來所佔的位置，繼續佔有；
2.每次移動的位置，是以自己左上角爲基點移動
相對定位的盒子仍在標準流中，後面的盒子仍以標準流方式對待它
如果浮動的主要目的是讓多個塊級元素一行顯示，那麼定位的主要價值就是移動位置，讓盒子到我們想要的位置上去
absolute :
絕對定位（拼爹型）
完全脫標，不佔有位置
移動多少位置完全與父級有關
如果父級沒有定位，以瀏覽器爲準對齊（document文檔）
如果父級有定位，根據元素依據最近的已經定位（絕對，相對，固定）的父級進行定位
（常用的子絕父相）
示例：
<html>
/* 邊偏移+定位模式 組成定位佈局 */
<head>
<style>
h1{
width: 100px;
height: 200px;
border: 5px solid blue;
margin: 50px auto;
background-color: yellow;
position: relative; /* 定位模式*/
}
.a {
width: 20px;
height: 20px;
background-color: red;
top: -5; /* 邊偏移 */
left: -5;
position: absolute; /* 定位模式*/
}
.b {
width: 20px;
height: 20px;
background-color: red;
bottom: -5; /* 邊偏移 */
right: -5;
position: absolute; /* 定位模式*/
}
</style>
</head>
<body >
<h1>
<div class="a"></div>
<div class="b"></div>
</h1>
</body>
</html>
fixed:
固定定位（認死理型）
1、固定定位的元素跟父級沒任何關係，只認瀏覽器
2、完全脫標，不佔有原來位置，不跟隨滾動條滾動
（ie6等瀏覽器buzhic）
四種定位總結
定位模式 是否脫標占有位置 是否可以使用邊偏移 移動位置基準 static 不脫標，正常 不可以 正常 relative 不脫標，佔有位置 可以 相對自身位置移動 absolute 完全脫標，不佔 可以 相對有定位的父級移動 fixed 完全脫標，不佔 可以 相對瀏覽器移動
疊加順序
css中，調整重疊定位元素的疊加順序，可以對定位元素應用z-index，取值正負皆可
例如：z-index: -2;
1.z-index默認0，取值越大，疊加越居上；
2.取值相同，後寫者上；
3.後面數字不能加單位；
4.只有相對定位、絕對定位、固定定位有此屬性，其餘標準流、浮動、靜態定位都無且不可指定此屬性
定位模式轉換
與浮動一樣，元素添加了 絕對、相對、固定定位後，元素模式都會轉換爲行內塊模式