之前已經講了盒子模型，以及行元素塊元素等概念，現在對于布局來說差的就是定位，是以本文将介紹position的一些屬性特點，進而在為布局的時候能夠提供幫助。
1.relative
relative是以網頁的左上角為原點，然後以定義的top、left、right、bottom來确定兩個次元上的正方向，是以下面通過例子來講解：
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div {
width: 200px;
height:150px;
position:relative;
top:100px;
left:50px;
background-color:red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
檢視效果：
接下來将位置屬性改一下：
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div {
width: 200px;
height:150px;
position:relative;
bottom:100px;
right:50px;
background-color:red;
}
</style>
</head>
<body background-color="gray">
<div></div>
</body>
</html>
得到效果圖：
根據以上的規律可以知道，以左上角為原點，top表示從上往下為正軸，bottom表示從下往上是正軸，right表示從右往左是正軸，left表示從左往右是正軸。
2.absolute
absolute與relative最大的差別就是原點會發生改變，而top、bottom、left和right的正軸方向都是在網頁可視範圍内的，比如top是從網頁上端往下、bottom是從網頁下端往上、left是從網頁左端往右、right是從網頁右端往左。是以如果使用right和bottom那麼右下角就是原點，其它同理。以下用執行個體說明：
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div {
width: 200px;
height:150px;
position:absolute;
bottom:100px;
right:50px;
background-color:red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果圖如下：
這裡使用了bottom和right，是以是以左下角為原點的，往上和往左是正軸方向。但是absolute有個特點就是如果有下拉滾動條的，一旦拖動下拉滾動條，塊也會進行滾動，它的絕對展現在相對于初始那個點它是絕對的，一旦拖動滾動條，那個點發生了改變，那麼塊也随之改變。
3.fixed
fixed是固定的意思，對于四個方向的坐标以及正負軸來說，與absolute是一樣的，差別在于它位置是固定的，甚至下拉滾動條也不能改變它的位置。以下通過示例來區分fixed和absolute的差別。
<!DOCTYPE html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
body{
height:3000px;
}
div {
width: 200px;
height:150px;
position:fixed;
bottom:100px;
right:50px;
background-color:red;
}
.div{
width: 100px;
height:50px;
position:absolute;
bottom:50px;
right:50px;
background-color:green;
}
</style>
</head>
<body>
<div></div>
<div class="div"></div>
</body>
</html>
效果圖如下：
以上紅色塊是代表fixed的，綠色塊是代表absolute的，接下來拖動下拉滾動條，變化如下：
可以看出紅色塊并未移動，而綠色塊發生了移動，是因為它原本最底下的參考點往上移動了，是以它也跟着往上移動。
4.inherit
inherit就是繼承的意思，如果它的配置是以父類為基準的，就算子類重新配置，父類的定位配置也會将其覆寫。
<!DOCTYPE html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
.par {
width: 200px;
height:150px;
background-color:red;
}
.son{
width: 100px;
height:50px;
position:inherit;
bottom:50px;
right:50px;
background-color:green;
}
</style>
</head>
<body>
<div></div>
<div class="par"><div class="son"></div></div>
</body>
</html>
效果如下：
5.z-index
正常來說後面的塊會覆寫前面的塊，但是z-index可以改變層級的優先級，z-index值大的會覆寫z-index小的層級。執行個體如下：
<!DOCTYPE html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
.par {
width: 200px;
height:150px;
background-color:red;
position:fixed;
left:50px;
top:100px;
}
.son{
color:green;
position:fixed;
left:80px;
top:130px;
}
</style>
</head>
<body>
<div class="par"></div>
<div class="son">z-index的用法</div>
</body>
</html>
效果如下：
可以看出後面的層會覆寫前面的層，那麼接下來通過改變z-index的值來改變層的順序。
<!DOCTYPE html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
.par {
width: 200px;
height:150px;
background-color:red;
position:fixed;
left:50px;
top:100px;
}
.son{
color:green;
position:fixed;
left:80px;
top:130px;
z-index:-1;
}
</style>
</head>
<body>
<div class="par"></div>
<div class="son">z-index的用法</div>
</body>
</html>
效果如下：
可以看出，文字的z-index比較小會被覆寫，預設的z-index是0.