盒子的定位
一、 定位 （position）
定位position 說明：
設定對象的定位方式，可以讓布局層容易位置絕對定位，控制盒子對象更加準确。
定位 position 文法：
position : static 、absolute 、relative、fixed 。
static : 稱為靜态定位，這是預設的屬性值，也就是該盒子按照标準流（包括浮動方式）進行布局。
relative ：稱為相對定位，使用相對的盒子的位置常以标準流動排版方式為基礎，然後使盒子相對于它在原來的位置偏移指定的距離。相對定位的盒子仍在标準流中，它後面的盒子仍以标準流的方式對待它。
absolute : 稱為絕對定位，盒子的位置以它的包括框為基準進行偏移。絕對定位的盒子從标準流中脫離。這意味着它們對其後的兄弟盒子的定位沒有影響，其他的盒子就好象這個盒子不存在一樣。
fixed : 稱為固定定位，它和絕對定位類似，隻是以浏覽器視窗為基準進行定位，也就是當拖動浏覽器視窗的移動滾動條時，依然保持對象的位置不變。
position 指定的偏移量，水準方向通過left或者right屬性來指定；豎直方向通過top和bottom來指定。left，right，top，bottom這4個屬性隻有當position屬性設定為absolute、relative和fixed時才有效。
下面提供一些基礎代碼：
<!DOCTYPE html>
<html >
<head>
<title>position屬性</title>
<style type="text/css">body{
margin:20px;
font :Arial 12px;
}
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
padding:15px;
}
#son{
background-color:#D2B48C;
border:1px dashed #000000;
padding:10px;
}</style>
</head>
<body>
<div id="father">
<div id="son">Box盒子</div>
</div>
</body>
</html> 效果圖：
1、static (靜态定位)
在css的position中，設定static為預設值，它表示塊保持在原本應該在的位置上，即該值沒有任何的移動效果，這裡就詳細說了。
2、relative (相對定位)
使用相對定位的盒子的位置常以标準流的排版方式為基礎，然後使盒子相對于它在原本的标準位置偏移指定的距離。相對定位的盒子仍在标準流中，它後面的盒子仍以标準流方式對待它。position指定的偏移量可以使用left，right，top，bottom等屬性進行設定。
（1）除了将position屬性設定為relative屬性，再設定一些偏移量距離即使用right屬性和bottom屬性，如下：
#son{
background-color:#D2B48C;
border:1px dashed #000000;
padding:10px;
position:relative;
right:28px;
bottom:28px;
} 效果圖：
上圖可以看出Box盒子和原來的位置相比，它向左和向上分别移動了28像素，也就是說，“right:28px”的作用就是使Box盒子的新位置在它原來位置的右邊框左側28像素的地方，“bottom:28px”的作用就是使Box盒子的新位置在原來位置的下邊框上側28像素的地方。
這裡用到了right和bottom這兩個CSS屬性，實際上在CSS中一共有4個配合position屬性使用的定位屬性，除right 和 bottom 之外，還有top和left。
當子塊使用相對定位以後，它發生了偏移，即使移動到了父盒子的外面，父盒子也不會變大，就好像子盒子沒有變化一樣。
(2)兩個子塊的情況
下面讨論的是兩個子塊的情況。把上面的基礎代碼改為如下代碼，在父div中放兩個子div。首先對它們都不設定任何偏移。
<!DOCTYPE html>
<html>
<head>
<title>兩個子塊相對定位的情況</title>
<style type="text/css">body{
margin:20px;
font :Arial 12px;
}
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
padding:15px;
}
#father div{
background-color:#B2D4BC;
border:1px dashed #000000;
padding:10px;
}
#son1{
}
#son2{
}</style>
</head>
<body>
<div id="father">
<div id="son1">Box盒子1</div>
<div id="son2">Box盒子2</div>
</div>
</body>
</html> 效果圖：
上圖可以看到那兩個子塊的設定還都空着。下面首先将Box盒子1的CSS設定為：
#son1{ #son
position:relative;
bottom:28px;
right:28px;
} 再看效果圖：
與前一個效果圖相比可以看到子塊“Box盒子1”的位置以自身為基準向上和向左各偏移了28像素，而Box盒子2沒有任何變化。上面的實驗是針對标準流方式進行的，實際上，對浮動的盒子使用相對定位也是一樣的，都會相對于原有的位置進行指定的偏移并到達新的位置，而這一偏移并不會對其後面的兄弟元素帶來任何的影響。
“相對定位” 的原則：
（1）、使用相對定位的盒子，會相對于它原本的位置，通過偏移指定的距離，到達新的位置。
（2）、使用相對定位的盒子仍在标準流中，它對父塊和兄弟盒子沒有任何影響。
相對定位，就是以盒子本身在标準流中或者浮動時原本的位置作為偏移基準的。
3、absolute (絕對定位)
通過上面介紹的例子可以了解到 position 屬性需要通過配合偏移一定的距離來實作定位，而其中核心的問題就是以什麼作為偏移的基準。絕對定位，盒子的位置以它的包含框為基準進行偏移（如果對象的父級沒有設定定位屬性，即還是遵循 HTML 定位規則的，則依據 body 對象左上角作為參考進行定位）。
下面提供一些基礎代碼：
<!DOCTYPE html>
<html>
<head>
<title>三個子塊絕對定位的情況</title>
<style type="text/css">body{
margin:20px;
font :Arial 12px;
}
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
padding:15px;
}
#father div{
background-color:#D2B48C;
border:1px dashed #000000;
padding:10px;
}
#son2{
}</style>
</head>
<body>
<div id="father">
<div>Box盒子1</div>
<div id="son2">Box盒子2</div>
<div>Box盒子2</div>
</div>
</body>
</html> 效果圖：
（1）嘗試使用絕對定位,對#son2的CSS設定位置，目前它還是空白的，下面将它改為：
#son2{
position: absolute;
top: 28px;
right: 28px;
} 效果圖：
上圖是以浏覽器視窗為基準，從右上角開始向下和向左各移動28像素。 這時候是否産生了一個這樣的疑問“是不是所有的絕對定位都以浏覽器為基準來定位呢？”答案是否定的，接下來對上面的代碼做一處修改，為父div增加一個定位樣式，代碼如下：
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
padding:15px;
position: relative;
} 效果圖：
上圖所示效果發生了變化，偏移的距離沒有變化，但是偏移的基準不再是浏覽器視窗，而是它的父div了。
絕對定位的原則：
（1）、使用絕對定位的盒子以它的“最近”
的一個“已經定位”的“祖先元素”為基準進行偏移，如果沒有已經定位的祖先元素那麼會以浏覽器為基準進行定位。
（2）、絕對定位的框從标準流中脫離，這意味着它們對其後的兄弟盒子的定位沒有影響，其他的盒子就好像這個盒子不存在一樣。
4、fixed （固定定位）
fixed定位與absolute定位有些類似，差別在于定位的基準不是祖先元素，而是浏覽器視窗或者其他顯示裝置的視窗。當通路者拖動浏覽器視窗的滾動條時，固定定位的元素将保持相對浏覽器視窗不變的位置。這裡就不詳細介紹了。
5. z-index (空間位置)
z-index屬性用于調整定位時重疊的上下位置，頁面為x-y軸，垂直于頁面的方向為z軸，z-index值大的頁面位于其值小的上方。