CSS佈局 0x2 position屬性
position 屬性指定了元素的定位類型。
position 屬性的五個值：static,relative,fixed,absolute,sticky。
元素可以使用的頂部，底部，左側和右側屬性定位。然而，這些屬性無法工作，除非是先設定position屬性。他們也有不同的工作方式，這取決於定位方法。
static
static是默認值。任意position: static;的元素不會被特殊的定位。一個 static 元素表示它不會被「positioned」，一個 position 屬性被設置爲其他值的元素表示它會被「positioned」。
relative
relative表現的和static一樣，除非你添加了一些額外的屬性。在一個相對定位（position屬性的值爲relative）的元素上設置
top、right、bottom和left屬性會使其偏離其正常位置。其他的元素的位置則不會受該元素的影響發生位置改變來彌補它偏離後剩下的空隙。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>position</title>
<style>
.relative1 {
position: relative;
border:solid aqua 5px
}
.relative2 {
position: relative;
top: -20px;
left: 20px;
background-color: #fff;
width: 500px;
}
</style>
</head>
<body>
<div class="relative1">
relative 表現的和 static 一樣，除非你添加了一些額外的屬性。
</div>
<div class="relative2">
在一個相對定位（position屬性的值爲relative）的元素上設置 top 、 right 、 bottom 和 left 屬性會使其偏離其正常位置。其他的元素的位置則不會受該元素的影響發生位置改變來彌補它偏離後剩下的空隙。
</div>
</body>
</html>
fixed
一個固定定位（position屬性的值爲fixed）元素會相對於視窗來定位，這意味着即便頁面滾動，它還是會停留在相同的位置。和
relative一樣，top、right、bottom和left屬性都可用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>position</title>
<style>
.relative1 {
position: relative;
border:solid aqua 5px
}
.relative2 {
position: relative;
top: -20px;
left: 20px;
background-color: #fff;
width: 500px;
}
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
background-color: white;
}
</style>
</head>
<body>
<div class="relative1">
relative 表現的和 static 一樣，除非你添加了一些額外的屬性。
</div>
<div class="relative2">
在一個相對定位（position屬性的值爲relative）的元素上設置 top 、 right 、 bottom 和 left 屬性會使其偏離其正常位置。其他的元素的位置則不會受該元素的影響發生位置改變來彌補它偏離後剩下的空隙。
</div>
<div class="fixed">
一個固定定位元素不會保留它原本在頁面應有的空隙（脫離文檔流）。
</div>
</body>
</html>
absolute
absolute是最棘手的position值。absolute與fixed的表現類似，但是它不是相對於視窗而是相對於最的「positioned」祖先元素。如果絕對定位（position屬性的值爲absolute）的元素沒有「positioned」祖先元素，那麼它是相對於文檔的 body 元素，並且它會隨着頁面滾動而移動。記住一個「positioned」元素是指 position 值不是static的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>absolute</title>
<style>
.relative {
position: relative;
width: 600px;
height: 400px;
border: solid #fe0 5px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
border: solid #fa9 5px;
}
</style>
</head>
<body>
<div class="relative">這個元素是相對定位的。如果它是 position: static; ，那麼它的絕對定位子元素會跳過它直接相對於body元素定位</div>
<div class="absolute">這個元素是絕對定位的。它相對於它的父元素定位。</div>
</body>
</html>
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>margin</title>
<style>
.container{
position: relative;
border: solid orange 5px;
}
nav {
position: absolute;
left: 0px;
width: 200px;
border: solid pink 5px;
}
section{
/*position:static;*/
margin-left: 200px;
border: solid greenyellow 5px;
}
footer{
position: fixed;
bottom: 0;
left: 0;
height: 70px;
width: 100%;
border: solid green 5px;
}
body{
margin-bottom: 120px;
}
</style>
</head>
<body>
<div class="container">
<nav>
<ul>
<li><a href="#">aaa</a></li>
<li><a href="#">bbb</a></li>
<li><a href="#">ccc</a></li>
<li><a href="#">ddd</a></li>
</ul>
</nav>
<section>section 的 margin-left 樣式確保了有足夠的空間容納 nav 元素。</section>
<section>xxx</section>
<section>注意觀察當你調整瀏覽器窗口時發生了什麼。</section>
</div>
<footer>footer</footer>
</body>
</html>