CSS Position(定位)
定位的方法有4種：
1.static定位
2.relative定位
3.absolute定位
4.fixed定位
1.static定位
HTML元素的預設值，即沒有定位，元素出現在正常的流中。
靜态定位的元素不會受到 top, bottom, left, right影響。
2.relative定位
相對定位元素的定位是相對其正常位置。它原本所占的空間不會改變。
圖解：
示例代碼：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>相對定位</title>
<style type="text/css">
.rel_move {
width: 200px;
height: 200px;
border: 2px solid red;
position: relative;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div class="rel_move">
這個塊相對于其正常位置向右移動50px，向下移動50px（相對定位）
</div>
</body>
</html>
結果截圖：
它原本所占的空間不會改變。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相對定位</title>
<style>
h2.pos_top {
position: relative;
top: -50px;
}
</style>
</head>
<body>
<h2>這是一個沒有定位的标題</h2>
<h2 class="pos_top">這個标題是根據其正常位置向上移動</h2>
<p><b>注意:</b> 即使相對定位元素的内容是移動,預留白間的元素仍儲存在正常流動。</p>
</body>
</html>
結果截圖：
注：相對定位元素經常被用來作為絕對定位元素的容器塊。
3.absolute定位
絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對于<html>:
圖解：
示例代碼（相對于<html>定位）：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>絕對定位</title>
<style type="text/css">
.ab_mov {
width: 200px;
height: 200px;
border: 2px solid red;
position: absolute;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div class="ab_mov">
這個塊相對于html位置向右移動50px，向下移動50px（絕對定位）
</div>
</body>
</html>
結果截圖：
relative 定位和 absolute 定位示例（相對于最近的已定位父元素）：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>絕對定位</title>
<style type="text/css">
.pos_rel {
width: 300px;
height: 300px;
border: 2px solid red;
position: relative;
left: 50px;
top: 50px;
}
.pos_abs {
width: 200px;
height: 200px;
border: 2px solid black;
position: absolute;
right: 50px;
top: 50px;
}
</style>
</head>
<body>
<div class="pos_rel">
這個塊相對于其正常位置向右，向下移動(相對定位)
<div class="pos_abs">
這個塊相對于以定位的父類向右，向下移動（絕對定位）
</div>
</div>
</body>
</html>
結果截圖：
absolute 定位使元素的位置與文檔流無關，是以不占據空間。
absolute 定位的元素和其他元素重疊。
重疊的元素
元素的定位與文檔流無關，是以它們可以覆寫頁面上的其它元素
z-index屬性指定了一個元素的堆疊順序（哪個元素應該放在前面，或後面）
一個元素可以有正數或負數的堆疊順序，具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。
注意： 如果兩個定位元素重疊，沒有指定z - index，最後定位在HTML代碼中的元素将被顯示在最前面。
4.fixed定位
元素的位置相對于浏覽器視窗是固定位置。即使視窗是滾動的它也不會移動：
示例代碼：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>fixed 定位</title>
<style type="text/css">
.pos_fixed {
width: 200px;
height: 200px;
border: 2px solid red;
position: fixed;
right: 50px;
bottom: 50px;
}
</style>
</head>
<body>
<div class="pos_fixed">
這個塊相對于遊覽器定位（fixed 定位）
</div>
</body>
</html>
結果截圖：
注意：Fixed定位使元素的位置與文檔流無關，是以不占據空間。
Fixed定位的元素和其他元素重疊。