一、position的三種定位方式：http://runjs.cn/detail/c8jwkccp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.relative1 {
position: relative;
border: solid;
}
.relative2 {
position: relative;
top: -20px;
left: 20px;
background-color:blue;
width: 500px;
border: solid;
}
.relative3 {
position: relative;
width: 600px;
height: 400px;
border: solid;
}
.fixed{
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
border:solid;
}
.absolute{
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
border: solid;
}
</style>
</head>
<body>
<div class="relative1">
relative 表現的和 static 一樣，除非你添加了一些額外的屬性。
</div>
<div class="relative2">
在一個相對定位（position屬性的值爲relative）的元素上設置 top 、 right 、 bottom
和 left 屬性會使其偏離其正常位置。
其他的元素的位置則不會受該元素的影響發生位置改變來彌補它偏離後剩下的空隙。
相對定位（relative2）：對元素本來應該出現在的位置上進行偏移操作,其相對位置是windows視窗。
</div>
<div class="fixed">
固定定位（fixed）：可以用於頁眉和頁腳的固定定位方式
</div>
<div class="relative3">
這個元素是相對定位的。如果它是 position: static; ，那麼它的絕對定位子元素會跳過它直接相對於body元素定位。
<div class="absolute">
這個元素是絕對定位的。它相對於它的父元素定位。
</div>
</div>
</body>
</html>二、簡單佈局案例：http://runjs.cn/detail/d68pjege
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>佈局例子</title>
<style>
.container{
position: relative;
height: 400px;
border: solid;
}
nav{
position: absolute;
left:0;
height: 400px;
width: 200px;
border: solid;
}
section{
margin-left: 200px;
border:solid;
margin-top: 20px;
}
.foot{
position: fixed;
border: solid;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>Text</li>
<li>Contact</li>
</ul>
</nav>
<section >
section 的 margin-left 樣式確保了有足夠的空間容納 nav 元素。
</section>
<section >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.
Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.
Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac.
In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.
Integer fringilla congue eros non fermentum. Sed dapibus
pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</section>
<section >
注意觀察當你調整瀏覽器窗口時發生了什麼。效果很贊！
</section>
</div>
<div class="foot">
底部採用fixed固定定位的方式
</div>
</body>
</html>三、浮動案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float浮動佈局</title>
<style>
.c1{
border: solid blue 2px;
width: 100%;
height: 300px;
position: relative;
}
.c2{
float: right;
width: 50px;
height: 50px;
border: solid;
top:0;
}
</style>
</head>
<body>
<div class="c1">
相對定位，沒有浮動
<div class="c2">
採用浮動
</div>
</div>
</body>
</html>